Shadow

Classes

shadow-<name> writes the complete box-shadow value. Two shadow classes do not append their lists; the winning declaration supplies the entire shadow.

Values

Each token stores a comma-separated list of native shadows. Expand a value to inspect every layer. Light and dark use the same offsets, blur and spread lengths with different light-dark() colors.

A shadow changes paint, not layout

shadow-xs and shadow-xl produce different painted footprints around the same box. Neither reserves room for its shadow: the following element keeps the same position and gap.

The surfaces keep identical geometry and a 16px gap to the next element. Only the shadow token changes. Rulers measure the gap between boxes, not the shadow’s visible edge.

Text description

1. Both columns contain the same surface and following element. Their dimensions, padding and 16px layout gap are identical.
2. The left surface uses the preset shadow-xs token. The right surface uses shadow-xl, which paints more layers over a wider area.
3. The next element starts at the same height in both columns. Box shadows do not change the dimensions or spacing used by layout.
4. Both shadows use actual preset values. Their colors adapt to the image’s scheme while their offsets, blur and spread lengths remain unchanged. Gap rulers are inspection annotations.

The first shadow in a token’s list is painted on top of the later shadows. shadow-inset uses inner shadows; the six size steps use outer shadows. The tokens do not supply a surface color, radius, stacking order or clipping policy.

The element’s used color scheme selects each light-dark() color. It changes the paint without changing the shadow’s lengths or requiring another utility class. See Color roles for local scheme selection.

To remove the shadow, use the native declaration (box-shadow:none). To combine an inset with an outer shadow, define one token containing both lists; separate classes do not merge them.

See Color roles and native shadow painting and layout.

Usage

Keep resting surfaces low and lift only what floats above them.

<div>  <article class="… shadow-xs">    <p>Card</p>    <p>On the page</p>  </article>  <ul class="… shadow-lg">    <li>Duplicate</li>    <li>Rename</li>    <li>Archive</li>  </ul></div>

@layer theme {  :root,  :host {    --shadow-xs: 0 0 0 1px light-dark(oklch(0% 0 none / .04), oklch(100% 0 none / .04)), 0 1px 1px -.5px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .3)), 0 2px 2px -1px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .26));    --shadow-lg: 0 0 0 1px light-dark(oklch(0% 0 none / .05), oklch(100% 0 none / .06)), 0 1px 1px -.5px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .3)), 0 2px 2px -1px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .26)), 0 4px 4px -2px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .24)), 0 8px 8px -4px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .26)), 0 16px 16px -8px light-dark(oklch(0% 0 none / .055), oklch(0% 0 none / .3))  }}@layer utilities {  .shadow-lg {    box-shadow: var(--shadow-lg)  }  .shadow-xs {    box-shadow: var(--shadow-xs)  }}

Customize

Change a preset value or add a token: --shadow-card creates shadow-card.

@theme {  --shadow-card:    0 1px 2px light-dark(oklch(0% 0 none / .08), oklch(0% 0 none / .4)),    0 12px 24px -12px light-dark(oklch(0% 0 none / .2), oklch(0% 0 none / .5));}

@layer theme {  :root,  :host {    --shadow-card: 0 1px 2px light-dark(oklch(0% 0 none / .08), oklch(0% 0 none / .4)),      0 12px 24px -12px light-dark(oklch(0% 0 none / .2), oklch(0% 0 none / .5))  }}@layer utilities {  .shadow-card {    box-shadow: var(--shadow-card)  }}

See theme directives and Color.