CSS Box Shadow Generator
Build box shadows visually with offset, blur, spread, and inset — then copy ready-to-use CSS.
Live Preview
Generated CSS
Your Data Never Leaves Your Device
Every tool runs entirely in your browser. Nothing you type is uploaded, stored, or logged on our servers.
The CSS Box Shadow Generator gives you a live preview for every part of the box-shadow property: horizontal and vertical offset, blur radius, spread, colour, opacity, and the inset keyword for shadows drawn inside the element.
You can stack up to four layers, which is the trick behind natural-looking depth — a tight, darker shadow close to the element plus a wider, softer one reads far better than a single hard shadow. Layers are emitted as a comma-separated list in the order CSS paints them. Colour and opacity are edited separately and combined into rgba(), since shadows nearly always need transparency and a browser colour picker can't express an alpha channel.
FAQ
In order: horizontal offset, vertical offset, blur radius, spread radius, then colour. Positive offsets push the shadow right and down; spread grows or shrinks the shadow before blurring.
Use a small vertical offset, a generous blur, and low opacity — something like 0px 4px 12px rgba(0,0,0,0.15). Stacking two or three subtle layers reads more realistically than one hard shadow.
Inset draws the shadow inside the element instead of outside, which is how you get pressed-button and inner-glow effects.
Yes. Add up to four layers and they're emitted as a comma-separated list, which is exactly how CSS stacks multiple shadows — the first layer sits on top.
Shadows almost always need transparency. Colour and opacity are edited separately and combined into rgba(), because a browser colour picker can't express an alpha channel.
No. Shadows are painted outside the box model and never take up space or shift surrounding elements — unlike a border.