Box Shadow Generator

What this does

This generator builds a CSS box-shadow value out of stacked layers. Each layer has its own X offset, Y offset, blur radius and spread, all on sliders, plus a colour swatch and a separate alpha slider. A per-layer inset checkbox flips that layer to draw inside the element. The preview is a 140 px white square on a striped backdrop so you can judge a shadow against something other than flat paper, and the read-only CSS box under it always holds the current declaration.

The tool opens with a two-layer stack, which serialises to this:

box-shadow: 0px 1px 2px 0px rgba(26, 22, 18, 0.06),
            0px 8px 24px -4px rgba(26, 22, 18, 0.12);

Why use two or three shadows instead of one?

A single blurred shadow reads as a smudge. Physical shadows are two things at once: a tight, fairly opaque contact shadow right under the object, and a wide, faint ambient shadow spreading out from it. The default stack above is exactly that — a 2 px blur at 6% alpha for contact, and a 24 px blur at 12% alpha pulled in by a −4 px spread for ambience. Elevation scales in most design systems are built the same way, which is why the editor is layer-first rather than a single set of sliders.

How do I build an elevation scale?

1. Start from the default two layers and treat them as your lowest step.
2. For the next step up, increase the Y offset and blur on the ambient layer roughly together — 8/24 becomes 12/32, then 16/48 — and leave the contact layer nearly alone.
3. Raise alpha slightly at each step rather than a lot; shadows that darken quickly look like they are sinking, not rising.
4. Use + Add layer if you want a third, very wide, very faint layer for the top of the scale. New layers arrive at 0/4/12/0 with 10% alpha.
5. Copy the CSS at each step and paste the set into your token file.

What does spread actually do?

Spread grows or shrinks the shadow shape before the blur is applied, and the slider runs from −50 to 50 px. Positive spread makes the shadow larger than the element in every direction, which is how you get a glow or a focus ring. Negative spread is the more useful half: it pulls the shadow in so a large blur does not leak out to the sides, keeping the soft edge below the element where a real light source would put it.

When should I use inset?

Tick inset when the element should look recessed rather than raised — pressed buttons, sunken text inputs, wells, and the inner top edge of a card. Offsets flip meaning: a positive Y on an inset layer darkens the top inside edge. Inset and outer layers can be mixed freely in the same stack, which is how a pressed button keeps its outline while losing its lift.

Why is the colour written as rgba() and not hex?

The swatch gives you a six-digit hex value and the α slider gives you a 0–100 percentage; the tool combines them into an rgba() string so the alpha is visible and editable in the output. The default tint is #1a1612 rather than pure black — a shadow carrying a little of the page's warmth looks less muddy over off-white and beige surfaces than rgba(0,0,0,…) does.

What pairs well with this?

Shadows and corners are usually chosen together, so keep the border-radius generator open alongside. Pick shadow tints with the colour converter, check the card underneath with the contrast checker, or build a frosted panel in the glassmorphism generator, which layers its own shadow over a blurred backdrop. Nothing here leaves the browser.