Layered soft shadow

When to use it

This is the shadow for anything that is meant to float a little above the page and look like it belongs there: a card, a popover, a pricing panel, the console on this site's home page. It is the default I reach for when a client's theme has a single black shadow under every card and the whole page reads as flat cut-outs. Replace that one line with these four and the same page looks lit.

How it is built

Four layers, each twice the offset and twice the blur of the one before, each at low opacity, all in a dark tone of the page's own hue. Tobias Ahlin, whose article popularised the technique, describes the method as "creating multiple box-shadows (separating each shadow with a comma), and increasing the offset and blur for every shadow", and the doubling is simply the cleanest way to increase them. The first layer is the contact edge and sits on top; the last is the ambient glow and is painted first.

box-shadow:
  0 1px 2px rgba(27, 35, 64, 0.06),    /* contact edge, on top */
  0 4px 8px rgba(27, 35, 64, 0.06),    /* near                 */
  0 12px 24px rgba(27, 35, 64, 0.08),  /* mid                  */
  0 32px 64px rgba(27, 35, 64, 0.12);  /* ambient, underneath  */

Tuning it for your page

Keep the offsets and blurs; change the colour and, if needed, the opacities. Josh Comeau's advice on colour is the rule: "By matching the hue and lowering the saturation/lightness, we can create an authentic shadow that doesn't have that 'washed out' grey quality." Take your page background, keep its hue, push the lightness right down, and use that as the shadow colour for every layer. On a pure white page a navy works; on a cream page a warm brown. If the element sits on a darker surface, raise the ambient layer's opacity to 0.18 rather than raising all four, because the wide layer is the one that separates the element from a mid-tone.

For a smaller element, a button say, drop the last layer; two or three are enough at that size and the 64 pixel blur would be wider than the button. For a modal that should float well clear of the page, keep all four and raise the third and fourth opacities a step.

Notes and limits

Four soft layers cost more to paint than one, so use this on the elements that carry the page, not on every row of a long list; two layers are enough for list items. Never transition the value on hover. And check it on the dark canvas in the generator before shipping: on a near-black surface no amount of tinted shadow shows, and the right move there is a luminous inset edge, which the inset shadows guide covers.

The code in four formats

Straight from the generator's readout for this state. Copy the one your project speaks; the output formats guide explains where each goes.

box-shadow:
  0 1px 2px rgba(27, 35, 64, 0.06),
  0 4px 8px rgba(27, 35, 64, 0.06),
  0 12px 24px rgba(27, 35, 64, 0.08),
  0 32px 64px rgba(27, 35, 64, 0.12);
border-radius: 16px;

$shadow:
  0 1px 2px rgba(27, 35, 64, 0.06),
  0 4px 8px rgba(27, 35, 64, 0.06),
  0 12px 24px rgba(27, 35, 64, 0.08),
  0 32px 64px rgba(27, 35, 64, 0.12);

.element {
  box-shadow: $shadow;
  border-radius: 16px;
}

<div class="shadow-[0_1px_2px_rgba(27,35,64,0.06),_0_4px_8px_rgba(27,35,64,0.06),_0_12px_24px_rgba(27,35,64,0.08),_0_32px_64px_rgba(27,35,64,0.12)] rounded-[16px]"></div>

/* Or name it once in your theme (Tailwind v4): */
@theme {
  --shadow-custom: 0 1px 2px rgba(27, 35, 64, 0.06), 0 4px 8px rgba(27, 35, 64, 0.06), 0 12px 24px rgba(27, 35, 64, 0.08), 0 32px 64px rgba(27, 35, 64, 0.12);
}
/* then use class="shadow-custom" */

.element
  box-shadow 0 1px 2px rgba(27, 35, 64, 0.06), 0 4px 8px rgba(27, 35, 64, 0.06), 0 12px 24px rgba(27, 35, 64, 0.08), 0 32px 64px rgba(27, 35, 64, 0.12)
  border-radius 16px