CSS Box Shadow Generator

What the five values mean

A single shadow is offset-x offset-y blur spread color. The browser reads the lengths by position, so you cannot reorder them, but the color can sit at either end — rgba(0,0,0,.2) 0 4px 8px is legal. Leave the spread off and it is zero. Leave the blur off too and you get a hard-edged duplicate of the box, which is the whole trick behind the flat offset shadow style.

Blur is not the distance the shadow travels

This is the value people misread. The blur radius does not push the shadow further out. It says how wide the soft edge is, and that fade is centred on where the hard edge would have been. A 24px blur spreads the transition over roughly 24 pixels, about half of it outside the box outline and half of it eaten inward. The spec defines it as approximating a Gaussian blur with a standard deviation of half the blur radius.

Two consequences. A large blur with no negative spread bleeds out of the sides, which is why a shadow meant to sit under a card ends up glowing around it. And a shadow with blur but no offset is visible on all four sides, because half of that fade escapes in every direction.

Spread runs before the blur

Spread inflates or deflates the shadow rectangle, and only then is the result blurred. Negative spread is the fix for the bleeding problem above: 0 18px 36px -14px shrinks the shape by 14 pixels first, so after blurring almost nothing escapes sideways and the shadow reads as a pool under the element. Most shadow systems that look good use a negative spread on their largest layer.

Why one shadow always looks fake

A real object in real light casts two things at once: a small, dark, sharp contact shadow right where it meets the surface, and a much larger, fainter, diffuse one. A single CSS shadow can be one or the other, never both, which is why it reads as a sticker. Stacking two to four layers with growing blur and shrinking opacity is the whole technique, and it is what the Card and Lifted presets above do.

Color matters as much as geometry. Pure black at low opacity turns everything it covers gray, which looks dirty over anything colored. Tinting the shadow toward a dark version of the surface's own hue — a deep navy under a blue-gray page, for instance — reads as a shadow rather than a smudge. The default here is a very dark indigo for exactly that reason.

Inset, and where it is painted

An inset shadow is drawn inside the padding box, on top of the background but underneath the content. It is clipped by the border radius, so it follows rounded corners automatically. Inset and outset layers can appear in the same list — they are independent, painted first to last, with the first layer on top.

box-shadow against filter: drop-shadow

box-shadow follows the border box. If your element is a transparent PNG, an SVG icon or something cut out with clip-path, the shadow still comes out rectangular. filter: drop-shadow() follows the actual alpha channel and gives the shape you wanted, at a higher rendering cost and with no spread parameter at all.

Layout and performance

A shadow occupies no layout space. Nothing moves to make room for it, which means an ancestor with overflow: hidden will happily cut it in half. Animating blur or spread also forces the browser to repaint the shadow every frame, which is expensive on large elements. Put the shadow on a pseudo-element and animate its opacity instead.

Where this tool stops

The preview shows one element on a flat backdrop. Real pages put cards over photographs and gradients, and a shadow tuned on gray can vanish there — switch the preview background before you commit. Dark interfaces are the harder case: black at 14% opacity is nearly invisible on a dark surface, and most dark themes end up using a subtle light border, or a much heavier shadow, rather than the same values dimmed. This tool also does not write text-shadow, which takes no spread value and is a different property with a different syntax.

Last updated September 19, 2026