CSS box shadow colors that do not look like 2012
Gray shadows are fine. Colored shadows are trendy. Both fail when elevation looks like a smudge or a glow stick.
Shadow is color plus blur plus spread. Change the color wrong and cards look floating in fog or radioactive.
Start neutral, tint later
Dark translucent black (rgb(0 0 0 / 0.08)) still works for light UI. Tint with your brand hue at low alpha for marketing cards — keep chroma subtle.
Match shadow to surface temperature
Cool surfaces → cool shadows. Warm paper UI → slightly warm shadow. The CSS shadow tool previews combinations and copies the rule.
Dark mode inverts the problem
Elevation on dark UI often uses lighter edges or softer glows, not darker drops. Rebuild shadow tokens when you swap themes — do not reuse light-mode rgba blindly.