CSS Box Shadow Generator
Set offset, blur, spread, colour and inset with sliders, see a live preview, and copy the CSS. Free, no sign-up.
Soft shadows, the modern way
The most natural-looking shadows keep opacity low and blur high — think
0 8px 24px -6px rgba(0,0,0,.2) rather than a hard black drop. The negative
spread pulls the shadow in so it hugs the element. Toggle inset for inner
shadows on inputs and pressed buttons.
Frequently asked questions
What does box-shadow do?
The CSS box-shadow property casts a shadow around an element. It takes an x/y offset, a blur radius, a spread radius, and a colour — and you can stack several or set "inset" for an inner shadow.
How do I use this generator?
Drag the sliders for offset, blur, spread and opacity, pick a colour, toggle inset, then copy the generated CSS into your stylesheet.
What makes a shadow look natural?
Soft, believable shadows use a low opacity (15–30%), a generous blur, and often a slightly negative spread so the shadow stays tucked under the element. A tiny vertical offset reads as light from above.
Is this tool free?
Yes — it runs in your browser, is free, and needs no sign-up.