Layer and tint your shadows
Stack soft shadows and borrow the surface's hue to avoid gray mud.
Josh W. Comeaujoshwcomeau.comBy layering multiple shadows, we create a bit of the subtlety present in real-life shadows.
Josh W. Comeaujoshwcomeau.comBy matching the hue and lowering the saturation/lightness, we can create an authentic shadow that doesn't have that "washed out" grey quality.
Match the hue, then lower saturation and lightness.
1 · Tint with the surface
Switch the surface color and watch the bad shadow go gray.
Black at 30%Bad
Tinted to the surfaceGood
.card {
/* same hue as the surface, low lightness */
box-shadow: 0 12px 24px hsl(215 50% 20% / 0.3);
}2 · Layers, not one blur
Pick 1, 2 or 4 layers. Bad keeps a single one.
One layerBad
Stacked layersGood
.card {
box-shadow:
0 2px 2px hsl(215 50% 20% / 0.15),
0 6px 6px hsl(215 50% 20% / 0.15),
0 12px 12px hsl(215 50% 20% / 0.15),
0 24px 24px hsl(215 50% 20% / 0.15);
}Why it matters, pros and cons
Why it matters
Real shadows fall off softly and pick up the color of what they land on. One gray layer does neither.
Pros
- Each layer doubles offset and blur, so the falloff stays smooth.
- A tinted shadow keeps the surface vivid instead of dirtying it.
- Only box-shadow changes; no new markup or images.
Cons
- Four shadows cost more paint on big or animated surfaces.
- Each surface hue needs its own tint, or a token per theme.
- Long shadow strings are tedious to hand-write; generate them.