The box-shadow property takes up to six parts:

box-shadow: inset? offset-x offset-y blur spread color;

  • offset-x / offset-y: how far the shadow moves. A positive y offset puts it below the element.
  • blur: how soft the edge is. Zero is a hard edge.
  • spread: grows or shrinks the shadow before blurring. Negative spread keeps it tighter than the box.
  • color: use a transparent colour such as rgba(0, 0, 0, 0.15), not solid black.
  • inset: draws the shadow inside the box, for pressed or recessed effects.

Why one big shadow looks fake

Real light produces a tight dark shadow close to an object and a wider, fainter one further out. A single 0 10px 30px rgba(0,0,0,.5) is just one of those, and it looks heavy. Stacking several shadows with doubling offsets and blur imitates the real fall-off:

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.07),
  0 2px 4px rgba(0, 0, 0, 0.07),
  0 4px 8px rgba(0, 0, 0, 0.07),
  0 8px 16px rgba(0, 0, 0, 0.07),
  0 16px 32px rgba(0, 0, 0, 0.07);

The generator's "Layered" preset produces exactly this. Keep each layer's opacity low.

Useful recipes

  • Card: a layered shadow as above, with a 1 px border in a light grey.
  • Lifted edge: negative spread with a large y offset gives a shadow that peeks out only from the bottom.
  • Hard offset (retro): 8px 8px 0 #1b1813, with no blur.
  • Glow: zero offsets with a blur and a coloured shadow, such as 0 0 24px 4px rgba(59,130,246,.6).
  • Inset: inset 0 2px 8px rgba(0,0,0,.3) for text fields and pressed buttons.

Dark backgrounds

Black shadows are nearly invisible on dark backgrounds. Use a lighter surface for the raised element, a subtle border, or a coloured glow rather than a darker shadow.

Performance and accessibility

  • Animating box-shadow forces the browser to repaint, which can stutter on large or many elements. A smoother trick is to place the larger shadow on a pseudo-element and animate its opacity.
  • A shadow is decoration. Do not use it as the only sign that something is focused or selected. Keep a visible outline with enough contrast.
  • Shadows are not part of an element's layout size and do not affect surrounding elements.