CSS Box Shadow Generator

Each shadow is two to four lengths, a colour and an optional inset. The lengths must stay together and in order; the colour and inset can go before or after them. 0 8px 24px -6px rgb(15 23 42 / 0.16) reads as: no sideways shift, 8px down, a 24px blur, pulled in by 6px, slate at 16% opacity.

Commas separate layers, and the first layer is drawn on top. Unprefixed box-shadow has worked since Chrome 10, Firefox 4 and Safari 5.1 (iOS 5), with spread and inset included, so the -webkit-box-shadow line older generators still add is no longer needed.

The specification defines blur as a Gaussian blur with a standard deviation of half the blur radius, which makes the fade about twice the blur wide, centred on the shadow's edge. So an outer shadow paints roughly spread + blur past the box, plus the offset on the side it moves towards and minus it on the other:

Tick "Show how far it reaches" to see this as a dashed outline. It matters because shadows take no space in the layout and do not add to the scrollable area, so a parent with overflow: hidden, auto or clip cuts them off in a straight line. Give that parent padding at least as large as the reach, or move the clipping elsewhere.

Spread also changes the shadow's corners. With a positive spread, the corner radius grows by the spread, so 12px rounding and 10px spread give a 22px shadow corner. When the rounding is smaller than the spread, the browser adds less so small corners stay crisp: 10px rounding with 20px spread gives 27.5px, not 30px, and square corners stay square.

One blurred shadow has a single, even fade. Real shadows are dark and sharp close to the object and fade out wide, and you get much closer to that by stacking several layers, each with double the offset and blur of the last. "Smooth shadow" builds exactly that.

Stacked transparent layers darken each other: two 20% layers make 1 − 0.8 × 0.8 = 36%, not 40%. To land on a chosen darkness D with n layers, each one needs an opacity of 1 − (1 − D)^1/n.

The Smooth preset is five layers ending at 32px down with 64px blur and 20% darkness, which works out to 4.4% each:

0 2px 4px rgb(15 23 42 / 0.044),
0 4px 8px rgb(15 23 42 / 0.044),
0 8px 16px rgb(15 23 42 / 0.044),
0 16px 32px rgb(15 23 42 / 0.044),
0 32px 64px rgb(15 23 42 / 0.044)

Keep one light direction for the whole page. If every shadow falls downward, an element whose shadow falls to the side looks misplaced, even to people who could not say why.

inset makes the box look cut into the page. The shadow is painted just above the element's background but below its border and content, and only inside the padding box, so it starts at the inner edge of any border. Spread works in reverse: a larger spread makes the shadowed band wider and leaves less of the middle clear.

• Wells and fields: inset 0 2px 4px rgb(15 23 42 / 0.12) (the Inset well preset) darkens the top edge as if light came from above.
• Pressed buttons: switch from an outer shadow to a small inset one in :active.
• A line that takes no space: inset 0 0 0 1px with a colour draws a 1px edge inside the box without changing its size, and it can sit next to an outer shadow in the same list.

A child with its own background covers an inset shadow, because the shadow sits under the content. Put the shadow on the child, or add the inset on a ::after overlay with pointer-events: none.

A shadow can only darken what is behind it, and a dark page has little room left. The same black shadow at 25% opacity takes white to #BFBFBF, a 1.83:1 difference, but takes #0F172A only to #0B1120, 1.05:1, which hardly shows. The line under the preview runs this check for your page colour.

On dark themes, elevation usually comes from somewhere else:

• Make raised surfaces lighter than the page (the Glow preset puts a #1E293B box on a #0F172A page).
• Add a faint light edge such as inset 0 1px 0 rgb(255 255 255 / 0.06) along the top.
• Use a coloured glow (zero offset, wide blur, a little spread) for something that should look lit rather than lifted.

A shadow tinted toward the page colour, such as navy on a navy page, looks more natural than pure black on any colour except white and grey.

Use drop-shadow() for icons, logos, cut-out photos and shapes made with clip-path, where a rectangle would look wrong. Its third length is a standard deviation, not a blur radius, so drop-shadow(0 4px 8px …) is about as soft as box-shadow: 0 4px 16px …; halve the number when moving a shadow to the filter.

transition: box-shadow works, but the browser repaints the shadow on every frame, and large blurs on a page full of cards can stutter on slower phones. Changing only opacity and transform avoids repainting, so the usual trick is to put the bigger shadow on a pseudo-element and fade it in:

.card {
  position: relative;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
  transition: transform 0.2s;
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 24px 48px -12px rgb(15 23 42 / 0.35);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.card:hover { transform: translateY(-2px); }
.card:hover::after { opacity: 1; }

The overlay has no background, and an outer shadow is clipped out from under its own box, so nothing covers the card's content. Wrap the movement in @media (prefers-reduced-motion: no-preference) if it is more than a couple of pixels.

The Tailwind buttons under "Start from" load these values. Each utility is one or two layers of black at 5–25%, which is why they look neutral on any background colour. For anything else, the Tailwind tab writes an arbitrary shadow-[…] class.