CSS Box Shadow Generator

What does box-shadow actually do?

box-shadow paints a shadow around (or, when inset, inside) an element’s border box. Each layer is built from up to six values: an optional inset keyword, X and Y offsets, blur radius, spread radius, and a color. Multiple comma-separated layers stack in source order, with the first layer drawn on top. That stacking is what gives modern UI shadows their depth: a tight, dark layer for contact, a soft, wide layer for ambient light, sometimes a faint colored glow on top. This generator gives you a live, transparent-checkered stage so you can see exactly how the shadow falls — including subtle effects that disappear on a flat backdrop. You can drag any value with the slider for fast tuning, type an exact pixel number when a designer hands you specs, and reorder layers when the painter’s order matters. The output covers both raw CSS and Tailwind’s arbitrary-value syntax (shadow-[...]), and the current shadow stack is encoded in the URL hash so a shareable link rebuilds the exact same shadow on the other side. There is no server round-trip — everything renders client-side as you change inputs.

How to use it

1. Start from a preset

The preset row gives you six common starting points. Subtle and Smooth are good for cards; Sharp is the flat 8-bit look; Neumorphic needs a colored backdrop to read; Glow works on dark UI; Deep is for modals.

2. Tweak the values

Each layer has X / Y offsets, blur, spread, color and opacity, and an inset toggle. Drag the sliders for live feedback or type exact numbers in the box next to each slider.

3. Stack and reorder

Hit Add layer to stack more shadows. Each new layer is added with neutral defaults. Use the up / down arrows to reorder — the first layer paints last (on top of others).

4. Copy the output

Copy the CSS straight into your stylesheet, or grab the Tailwind arbitrary-value class for inline use. Copy share URL gives you a link that rebuilds the exact stack — handy for pinging a designer.

CSS box-shadow syntax breakdown

The full syntax is box-shadow: [inset] <x-offset> <y-offset> <blur-radius> <spread-radius> <color>. X / Y offsets move the shadow horizontally and vertically. Positive Y pushes the shadow down (the convention for lights coming from above). Blur radius softens the edges; 0 is a hard shadow. Spread radius grows or shrinks the shadow before the blur is applied — positive values make it bigger, negative values pull it tighter so it peeks out from edges instead of bulging. Color accepts any CSS color, but rgba() with a low alpha tends to look better than a fully opaque dark — real-world shadows are partial occlusions, not paint. The optional inset keyword paints inside the box, useful for pressed-button effects. Multiple shadows separated by commas stack from front to back: the first one wins where they overlap.

Choosing values that look right

Cards / panels: Y offset of 4–12px, blur 12–28px, spread -2 to -8, alpha 0.08–0.20. Two layers (one tight, one wide) usually beat one strong layer. Buttons: Y of 1–2px, blur 2–4px, very low alpha — think contact shadow. Modals: Y of 20–40px, blur 40–80px, negative spread, alpha 0.25–0.45. Glow: X and Y of 0, blur 20–60px, color is the brand accent at 30–60% alpha. Inset: small offsets (1–2px) and tiny blur for pressed-state controls. Avoid: pure black at full alpha — it crushes everything beneath. Use the page background hue mixed darker for shadows that feel attached.

Frequently asked questions

Why are multi-layer shadows better than one big one?

Real shadows have two parts: a hard, dark edge near the contact point (umbra) and a soft, fading halo (penumbra). Stacking a tight, low-blur layer with a wider, softer layer mimics that physically and reads as more grounded. A single strong shadow looks like a sticker.

What does spread actually do?

Spread inflates (positive) or shrinks (negative) the shadow rectangle before the blur is applied. Negative spread is great for cards: it pulls the shadow inward so it does not bulge past the corners, giving a tighter, more controlled look.

What is inset for?

inset paints the shadow inside the element instead of around it. It is the standard way to fake pressed buttons, well-style inputs, and inset cards. Combine a faint inset shadow with a faint outset shadow for a polished “sunken” effect.

Will the share URL work for someone else?

Yes. The current shadow stack is encoded into the URL hash (#shadow=...). Anyone opening that link will see the exact same layer stack, because the encoding is deterministic and runs entirely client-side.

Why does the Tailwind class use underscores?

Tailwind’s arbitrary-value syntax does not allow whitespace inside the brackets. The convention is to replace spaces with underscores (shadow-[0_4px_12px_rgba(0,0,0,0.1)]). Tailwind reads the underscores as spaces at compile time.

Are there performance costs?

Box shadows are GPU-rasterised and cheap on a static layer, but animating box-shadow directly forces a repaint. If you need an animated shadow, fade a separate layered element with a static shadow on top instead — that animates as a composited transform / opacity and stays smooth.

CSS Box Shadow Generator