Box Shadow

Class reference

Each shadow stacks five layers with decreasing opacity and increasing offset, producing a natural "smoke trail" elevation rather than a single hard halo.

Examples

<div class="shadow-md radius-lg p-md" style="background: var(--card)">An elevated card.</div>

Visual

Tokens

Each shadow is declared as five comma-separated layers. Each layer is offset-x offset-y blur spread color.

--shadow-none: 0px 0px 0px 0px oklch(from var(--black) l c h / 0);

--shadow-xs:
  0 8px 2px 0 oklch(from var(--black) l c h / 0), 0 5px 2px 0 oklch(from var(--black) l c h / 0.01),
  0 3px 2px 0 oklch(from var(--black) l c h / 0.03),
  0 1px 1px 0 oklch(from var(--black) l c h / 0.04), 0 0 1px 0 oklch(from var(--black) l c h / 0.05);

--shadow-md:
  0 66px 18px 0 oklch(from var(--black) l c h / 0),
  0 42px 17px 0 oklch(from var(--black) l c h / 0.01),
  0 24px 14px 0 oklch(from var(--black) l c h / 0.03),
  0 11px 11px 0 oklch(from var(--black) l c h / 0.04),
  0 3px 6px 0 oklch(from var(--black) l c h / 0.05);

See variables.css for --shadow-sm, --shadow-lg, and --shadow-xl in full.

The OKLCH from var(--black) syntax means shadows derive from the --black token. Re-target --black (to a warm dark, for example) and every shadow shifts in tone.

Layered approach

The closest-to-element layer (last in the list) carries the highest opacity and tightest blur. That is the "real" shadow you see. Earlier layers extend the shadow further down with progressively lower opacity, simulating how light falls off in the real world.

Compared to a single shadow with a large blur:

• Single shadow reads as a flat halo. Object feels stuck to a sheet of paper.
• Layered stack reads as natural depth. Object feels lifted off the page.

Customizing

Override a shadow by re-declaring the variable. Define a new shadow for a specific surface:

:root {
  --shadow-popover:
    0 4px 6px -1px oklch(from var(--black) l c h / 0.1),
    0 2px 4px -2px oklch(from var(--black) l c h / 0.1);
}

Apply with box-shadow: var(--shadow-popover).

See Foundations → Effects for the elevation hierarchy and use guidance per level.