CSS Box Shadow Color and Opacity: rgba, hsla, and Hex Alpha

The color value in box-shadow is where most of the visual quality comes from. Black shadows at full opacity look cheap. The right color and opacity combination looks natural. Here is how to control both.

Using rgba for Shadow Color

rgba is the most common format for box-shadow colors. It gives precise control over both color and opacity in one value.

/* Format: rgba(red, green, blue, alpha) */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);

For standard shadows, set RGB to 0 (pure black) and vary only the alpha:

Alpha	Intensity	Use Case
0.05	Nearly invisible	Ghost cards, very subtle elevation
0.08-0.12	Light	Standard cards on white backgrounds
0.15-0.20	Medium	Elevated cards, dropdowns, popovers
0.25-0.35	Strong	Modals, high-elevation sheets
0.5+	Heavy	Dark mode, dramatic depth effects

Colored Shadows with rgba

Change the RGB values to tint the shadow. Use the same hue as your surface for natural-looking colored shadows.

/* Blue card — blue-tinted shadow */
.card-blue {
  background: #2563eb;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
}

/* Purple card — purple-tinted shadow */
.card-purple {
  background: #7c3aed;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35);
}

The RGB values match the element background color. The result: the shadow looks like the card casts a color bloom rather than a neutral grey. This is what makes modern UI shadows look premium.

Sell Custom Apparel — We Handle Printing & Free Shipping

Using hsla for Shadow Color

hsla (Hue, Saturation, Lightness, Alpha) is useful in hue-based design systems where you want the shadow to match your primary color without calculating RGB values.

/* Match a blue primary at 220deg */
box-shadow: 0 8px 24px hsla(220, 90%, 50%, 0.25);

/* Match a warm orange */
box-shadow: 0 8px 24px hsla(30, 100%, 50%, 0.2);

If your design system uses CSS custom properties for primary hue, reference it directly:

:root {
  --primary-hue: 220;
}

.card {
  box-shadow: 0 8px 24px hsla(var(--primary-hue), 90%, 40%, 0.25);
}

Hex Alpha Values for Shadows

Modern CSS supports 8-digit hex colors where the last two digits represent alpha: #RRGGBBAA.

/* 8-digit hex — last 2 digits = alpha */
box-shadow: 0 4px 16px #00000020; /* 20 hex = ~12.5% opacity */
box-shadow: 0 4px 16px #0000001a; /* 1a hex = ~10% opacity */

Hex-to-alpha reference:

Hex Suffix	Opacity	rgba Equivalent
0d	5%	rgba(0,0,0,0.05)
1a	10%	rgba(0,0,0,0.10)
26	15%	rgba(0,0,0,0.15)
33	20%	rgba(0,0,0,0.20)
4d	30%	rgba(0,0,0,0.30)

Use rgba for readability. Hex alpha is compact but requires mental hex math to understand the opacity at a glance.

When to Change Shadow Color

Dark mode: Increase opacity or switch to a subtle brand-colored shadow (black shadows disappear on dark backgrounds).

Branded cards: Match the shadow hue to the card background for a premium look.

Neon / glow effects: Use high-opacity saturated colors: rgba(0, 255, 200, 0.5).

Default UI components: Stick with low-opacity black (rgba(0,0,0,0.08) to rgba(0,0,0,0.15)) for universal compatibility across light themes.

Frequently Asked Questions

Can I use a CSS variable as the box-shadow color?

Yes. Define --shadow-color as the full rgba value in :root and reference it: box-shadow: 0 4px 16px var(--shadow-color). Override it in your dark mode media query for theme switching.

Which is better for shadows: rgba, hsla, or hex?

rgba is most readable and widely used. hsla is useful in hue-based design systems. Hex alpha is compact but hard to read. Use rgba for consistency.

Why does a colored shadow look like a stain instead of a glow?

Usually the opacity is too high or the color is too dark. For colored glows, use a fully saturated light color at 25-40% opacity. Deep dark colors with high opacity look muddy. Bright light colors at low-to-medium opacity look like glows.