Home / CSS & color / CSS Box Shadow Generator
CSS Box Shadow Generator
Shadows read as depth only when they behave like light. Move the sliders, watch the card, and copy the CSS. A small vertical offset with a wide, soft blur and low opacity is what most interfaces want.
How to use it
- Set the horizontal and vertical offset.
- Adjust blur, spread, colour and opacity.
- Tick inset for an inner shadow, then copy the rule.
Examples
- 0 8px 24px −4px, 25% opacity — a modern card lift.
- 0 1px 2px, 15% opacity — a subtle edge for buttons.
- Inset with a small blur makes a field look pressed in.
Questions people ask
Why do my shadows look grey and dead?
Because pure black at high opacity flattens everything. Tint the shadow towards the background hue and keep opacity low — a dark blue shadow on a warm page reads far more naturally than plain black.
Can I stack several shadows?
Yes, by separating them with commas in one declaration. Two or three layers with increasing blur mimic real light much better than a single hard shadow, which is how most design systems build elevation.
Related tools
Updated: 2026-08-07