CSS Box Shadow Generator
Create CSS box-shadow with live preview — stack multiple layers, set offset, blur, spread, colour, opacity and inset, then copy the code. In your browser.
Presets
Box colour, background and shape are the preview only — the CSS below is the shadow.
box-shadow: 4px 8px 24px -2px rgba(0, 0, 0, 0.25);🔒 Generated in your browser — nothing is uploaded.
Design CSS box-shadow visually
Drag sliders for horizontal and vertical offset, blur, spread and opacity, pick a colour, and toggle inset — the
preview box is painted with the very box-shadow declaration printed below it, so what you see is what
you paste. Stack several shadows into one declaration, start from a preset, and dress the preview in your own box
colour, background and shape while you work.
What each value does
Offset X/Y move the shadow, blur softens its edge, spread grows or shrinks it, and inset draws the shadow inside the element instead of behind it. Several shadows, comma-separated, are drawn in list order — the first nearest the reader — which is how a soft layered depth is built.
Frequently asked questions
What is an inset shadow?
Inset draws the shadow inside the element, creating a pressed or inner-glow effect instead of a shadow behind it.
Can I use negative offsets?
Yes. Negative X moves the shadow left and negative Y moves it up, so you can cast the shadow in any direction.
Can I stack more than one shadow?
Yes. Add shadows with "Add shadow" and edit each one on its own tab; they are written as a single comma-separated box-shadow and drawn in list order, the first nearest the reader.
Do the box and background colours end up in the CSS?
No — those dress the preview so you can judge the shadow against your own design. The generated declaration is the shadow itself, optionally repeated under the -webkit- and -moz- prefixes.
Is anything uploaded?
No. The shadow is generated in your browser from your slider values; nothing is sent to a server.