Box Shadow Generator
Tune offset, blur, spread, and colour, then copy the CSS.
One light source, consistently applied
Shadows read as convincing when they behave as though a single light source lit the whole interface. In practice that means every elevated element casts its shadow in the same direction — almost always straight down, with little or no horizontal offset — and elements that sit higher cast larger, softer, more diffuse shadows. A card with a shadow offset down-right next to a modal with a shadow offset down-left immediately looks wrong, even to people who cannot say why.
Layered shadows look real; single shadows look flat
Real shadows are not one uniform blur. A close, tight, relatively dark shadow describes the contact between the object and the surface, while a wider, softer, much lighter one describes ambient occlusion. Stacking two or three shadows in one declaration — a 1–2px tight one and a 10–20px diffuse one — reproduces this and is the single biggest quality difference between amateur and professional shadow work. CSS accepts a comma-separated list, so it costs nothing but the typing.
Pure black shadows are almost always wrong
Shadows are areas where less light reaches the surface, not areas of added black paint. Using rgba(0,0,0,0.5) on a warm-toned interface produces a dead grey that fights the palette. Tinting the shadow towards a dark, desaturated version of the surface colour — or towards the complement of the light — reads far more naturally. Keeping opacity low (0.05 to 0.15 per layer) and letting the layering create depth beats a single heavy shadow.
Dark interfaces are a special case: shadows barely register against a dark background, so elevation there is usually communicated with a lighter surface colour instead, sometimes with a subtle light border along the top edge.
How to use it
- Set offset, blur, spread, and colour, keeping horizontal offset at or near zero.
- Add a second, tighter shadow layer for contact and keep both opacities low.
- Copy the CSS and reuse the same values as a token across every card at that elevation.
- For dark themes, lighten the surface instead of deepening the shadow.
Questions worth asking
Why do my shadows look fake?
Usually one uniform blur at high opacity. Real shadows are layered — a tight dark contact shadow plus a wide soft ambient one — and each layer should be far more transparent than a single shadow would be.
Should shadows be pure black?
Rarely. A shadow is reduced light, not added black, so pure black reads as a dead grey against a coloured interface. Tint it towards a dark desaturated version of your surface colour instead.
What does spread actually do?
Spread grows or shrinks the shadow shape before blurring. A negative spread pulls the shadow in so it peeks out only at the bottom, which is a common way to make a card look like it is resting on the page rather than floating.
How do I show elevation in dark mode?
Shadows are nearly invisible against dark backgrounds. Use a progressively lighter surface colour for higher elevations, optionally with a subtle light border on the top edge.
Disclaimer: Generated colours, scales, and CSS are a starting point for your own design system. Always verify contrast, rendering, and behaviour on real devices — passing an automated check is not the same as meeting your accessibility obligations.