box-shadow

Adding light and dark shadow effects around an element.

Overview

Basic usage

Use shadow tokens

Use shadow:* tokens for common elevation levels. Preset shadow tokens are defined separately for light and dark modes, so the class name stays the same while the active theme changes the box-shadow value.

<article class="shadow:md">    ...</article>

@layer theme {    @media (prefers-color-scheme:light) {        :root {            --shadow-md: 0 0 0 1px oklch(0% 0 none / .05), 0 2px 4px -2px oklch(0% 0 none / .06), 0 8px 16px -4px oklch(0% 0 none / .1)        }    }    @media (prefers-color-scheme:dark) {        :root {            --shadow-md: 0 0 0 1px oklch(100% 0 none / .06), 0 2px 4px -2px oklch(0% 0 none / .38), 0 8px 16px -4px oklch(0% 0 none / .3)        }    }}@layer utilities {    .shadow\:md {        box-shadow: var(--shadow-md)    }}

Use raw values

Use raw values when a shadow does not belong in the shared scale. Raw values are literal; they do not automatically adapt between light and dark modes.

<div class="shadow:0|1px|2px|black/.12,0|4px|8px|black/.08">...</div>

Use inset shadows

Use shadow:inset|... when the shadow should render inside the element.

<div class="shadow:inset|0|1px|2px|black/.12">...</div>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="shadow:sm shadow:md:hover shadow:none@print">...</div>

Customize mode-specific tokens

Override the same preset shadow-* key in @theme light and @theme dark when an elevation decision should adapt across modes.

@theme light {    --shadow-sm: 0 0 0 1px oklch(0% 0 none / .05), 0 2px 4px -2px oklch(0% 0 none / .08), 0 8px 16px -4px oklch(0% 0 none / .10);}@theme dark {    --shadow-sm: 0 0 0 1px oklch(100% 0 none / .06), 0 2px 4px -2px oklch(0% 0 none / .38), 0 8px 16px -4px oklch(0% 0 none / .30);}

<article class="shadow:sm">...</article>

Prefer tokens for product surfaces. Use raw values for one-off art direction, then promote repeated values into the shadow scale.