盒子陰影box-shadow
Adding light and dark shadow effects around an element.
Overview
| Class | Declarations |
|---|---|
shadow:xs | box-shadow: var(--shadow-xs);
|
shadow:sm | box-shadow: var(--shadow-sm);
|
shadow:md | box-shadow: var(--shadow-md);
|
shadow:lg | box-shadow: var(--shadow-lg);
|
shadow:xl | box-shadow: var(--shadow-xl);
|
shadow:2xl | box-shadow: var(--shadow-2xl);
|
shadow:<value>,<…> | box-shadow: <value>,<…>;
|
shadow:inset|<offset-x>|<offset-y>|<color> | box-shadow: inset <offset-x> <offset-y> <color>;
|
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>Generated CSS
@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.