🌫️ CSS Box Shadow Generator
Drag the sliders to design a box-shadow and copy the CSS. Offset, blur, spread, colour and inset update a live preview instantly.
box-shadow: 0px 10px 25px -5px rgba(30, 41, 59, 0.25);How the css box shadow generator works
The CSS box-shadow property takes up to six values: horizontal offset, vertical offset, blur radius, spread radius, a colour, and the optional inset keyword. This generator exposes each as a control and rebuilds the shorthand live, so you can see exactly how X and Y move the shadow, how blur softens it, how spread grows or shrinks it, and how inset flips the shadow inside the box. It writes valid CSS you can paste straight into a stylesheet, and because everything is computed in your browser, nothing is uploaded.
You can stack multiple shadows by separating them with commas in CSS; this tool builds one layer at a time, which covers the vast majority of real use. For a crisp hairline border effect, use a 0 blur with a small spread; for soft elevation, use a larger blur with a low-opacity colour.
Frequently asked questions
What do the box-shadow values mean?
In order: horizontal offset (right is positive), vertical offset (down is positive), blur radius (higher is softer), spread radius (positive grows the shadow, negative shrinks it), and the colour. Add the inset keyword to draw the shadow inside the element instead of outside.
How do I make a soft, realistic shadow?
Use a small vertical offset, a generous blur, little or no spread, and a semi-transparent black (for example rgba(0,0,0,0.15)). Soft, low-opacity shadows read as natural elevation; hard, dark shadows look artificial.
What is an inset box-shadow?
Inset draws the shadow inside the element's box, which is how you create pressed-button, inner-glow or inset-border effects. Toggle the inset option and the preview updates to show the shadow inside the shape.
Is the generated CSS cross-browser safe?
Yes. box-shadow is supported in every modern browser without a vendor prefix. You can paste the output directly; no -webkit- or -moz- prefix is needed for current browsers.
Is my design sent anywhere?
No. The CSS is generated in your browser with JavaScript and never uploaded. It works offline.