Box-Shadow Generator
Dial in offset, blur, spread, color and opacity with sliders, watch the shadow update live, and copy the exact CSS — inset shadows included.
Get shadows right the visual way
The box-shadow property packs five values into one line, and
guessing them blind is slow. This tool turns each value into a slider so
you can feel the effect of offset, blur and spread, then copy a shadow
you actually like — no trial-and-error reloads.
What each value does
- Offset X / Y — how far the shadow shifts sideways and down. Negative values move it the other way.
- Blur — the softness of the edge. Higher is fuzzier.
- Spread — grows (positive) or shrinks (negative) the whole shadow.
- Opacity & color — the tint and strength. Low opacity dark shadows look the most natural.
- Inset — draws the shadow inside the element for a recessed look.
Frequently asked questions
What do the sliders control?
X and Y move the shadow horizontally and vertically. Blur softens the edge, spread grows or shrinks the shadow, and opacity sets how strong it looks. The color picker sets the shadow's base color.
What is an inset shadow?
An inset shadow is drawn inside the element instead of behind it, creating a pressed or recessed look. Toggle 'Inset' to switch between an outer drop shadow and an inner one.
How do I make a soft, modern shadow?
Use a small Y offset, a generous blur, zero or slightly negative spread, and low opacity (around 10–20%). Subtle shadows read as depth without looking heavy.
Can I stack multiple shadows?
CSS supports comma-separated shadows for layered effects. This tool builds one shadow at a time — copy it, then paste several into one box-shadow rule separated by commas.
Is the output standard CSS?
Yes. The generated box-shadow value works in every modern browser with no prefixes. Everything is computed in your browser — nothing is uploaded.