Box Shadow Generator
Stack as many layers as you like, watch it live, and copy the CSS.
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
How to Use
- 1. Start from a preset, or build a shadow from scratch.
- 2. Adjust offset, blur, spread, colour and opacity — the preview updates live.
- 3. Add more layers for a more realistic, stacked shadow.
- 4. Copy the generated CSS into your stylesheet.
Shadows That Look Real
A single large, soft shadow is the most common mistake in UI design — it reads as a grey smudge rather than depth. Physical objects cast two shadows at once: a tight, darker contact shadow right beneath them, and a wider, fainter ambient one. Stacking two layers with different blurs reproduces that, which is why every mature design system defines elevation as multi-layer.
Spread is the least understood value. It grows or shrinks the shadow shape before the blur is applied, so a negative spread pulls the shadow in tight under the element — useful for keeping a large blur from bleeding out sideways.
Keep the colour semi-transparent rather than a solid grey. An rgba black at 10–15% sits correctly on any backdrop, while a fixed grey only works on the one background you picked it against.
Shadows are painted outside the box model and occupy no space, so unlike borders they never shift the layout around them.
Related: CSS Gradient Generator, CSS Unit Converter, and Color Palette Generator.
Frequently Asked Questions
What do the four length values mean?
In order: horizontal offset, vertical offset, blur radius, and spread. Offsets move the shadow, blur softens its edge, and spread grows or shrinks the shadow before the blur is applied — a negative spread is how you pull a shadow in tight under an element.
Why do realistic shadows use more than one layer?
Real light produces both a tight contact shadow near the object and a wider, softer ambient one. Stacking two or three shadows with different blurs and opacities reproduces that, which is why design systems almost always define multi-layer elevation.
What does inset do?
It draws the shadow inside the element instead of outside, making the box look recessed rather than raised. It is the standard way to style pressed buttons and inset form fields.
Why use rgba instead of a solid colour?
A semi-transparent black sits naturally over any background, while a solid grey only looks right on the one background it was picked for. Keeping the alpha low is what makes a shadow read as light rather than as a second object.
Does box-shadow affect layout?
No. Shadows are painted outside the box model and take up no space, so they never push neighbouring elements around — unlike a border, which does.
Was this tool helpful?
More Tools
Related Developer Tools
JS & CSS Minifier
JSON Formatter
Regex Tester
SQL Formatter
You Might Also Like