box-shadow ×4

Four faint shadows beat one dark one

CaveatA single shadow big enough to say “floating” is also dark enough to say “smudge”, because real light does not stop at one penumbra. A ladder of three or four layers, each roughly doubling the offset and blur of the one before at a constant low alpha, reads as a single soft shadow with a dense core and a wide falloff. The alphas stack where the layers overlap — four times .07 is about .25 against the element, thinning to .07 at the rim — so judge the total, not the layer. And keep box-shadow out of transitions: it repaints every frame of the animation. Put the hover shadow on an ::after and transition that pseudo’s opacity instead.

FallbackMultiple shadows have worked for as long as box-shadow has existed, so there is no engine story. The mode that actually deletes them is forced colours: Windows High Contrast strips every shadow on the page, and a card whose only edge was its shadow dissolves into the background. Keep a border — a transparent one costs nothing visually, and forced colours will paint it for you.

.card {
  /* offset and blur double each
     step, alpha stays put */
  box-shadow:
    0 1px  1px rgb(9 14 24 / .07),
    0 2px  3px rgb(9 14 24 / .07),
    0 5px  8px rgb(9 14 24 / .07),
    0 12px 20px rgb(9 14 24 / .07);
  /* the edge high contrast keeps */
  border: 1px solid transparent;
}

Published 5 Sep 2026