Shadow
Set a configured box shadow or remove the box shadow.
Apply a configured box shadow, an arbitrary CSS box-shadow, or remove the shadow.
Quick reference
| Example class | Expected declarations |
|---|---|
shadow-panel | box-shadow: var(--zw-shadow-panel); |
shadow-[0_12px_24px_#16324f33] | box-shadow: 0 12px 24px #16324f33; |
Example setup
The shared preview base explicitly sets spec 1, reset: "none", strict mode, tokens.spacingUnit: "0.25rem", and no breakpoints. Each named value is configured in that example; there is no inherited palette or theme. wind-demo classes are authored context styles; their CSS is shown separately from the utility declarations.
Examples in use
Compare named, custom, and absent shadows
The first card uses the configured panel token, the second uses a validated one-off box-shadow, and shadow-none removes it.
<div class="wind-demo-shadow-grid"><div class="wind-demo-shadow-card bg-panel text-ink p-3 shadow-panel">Configured panel shadow</div><div class="wind-demo-shadow-card bg-panel text-ink p-3 shadow-[0_12px_24px_#16324f33]">One-off CSS shadow</div><div class="wind-demo-shadow-card bg-panel text-ink p-3 shadow-none">No shadow</div></div>@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
:root {
--zw-color-accent: #075985;
--zw-color-alert: #8b1e3f;
--zw-color-focus: #0f766e;
--zw-color-ink: #16324f;
--zw-color-panel: #edf4f8;
--zw-color-white: #fff;
--zw-shadow-panel: 0 6px 18px #16324f2e;
--zw-spacing-unit: .25rem;
}
}
.wind-demo-shadow-grid {
display: flex;
flex-wrap: wrap;
gap: 1.1rem;
max-width: 36rem;
padding: .8rem;
color: #16324f;
font: 14px / 1.45 system-ui, sans-serif;
}
.wind-demo-shadow-card {
min-width: 8rem;
}
.p-3 {
padding-top: 0.75rem;
padding-right: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 0.75rem;
}
.text-ink {
color: var(--zw-color-ink);
}
.bg-panel {
background-color: var(--zw-color-panel);
}
.shadow-\[0_12px_24px_\#16324f33\] {
box-shadow: 0 12px 24px #16324f33;
}
.shadow-none {
box-shadow: none;
}
.shadow-panel {
box-shadow: var(--zw-shadow-panel);
}Configuration for this example
{
"wind": {
"spec": 1,
"reset": "none",
"strict": true,
"tokens": {
"spacingUnit": "0.25rem",
"colors": {
"ink": "#16324f",
"accent": "#075985",
"focus": "#0f766e",
"alert": "#8b1e3f",
"panel": "#edf4f8",
"white": "#ffffff"
},
"shadows": {
"panel": "0 6px 18px rgba(22, 50, 79, 0.18)"
}
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo-shadow-card": true,
"wind-demo-shadow-grid": true
},
"safelist": {
"docs-preview": [
"bg-panel",
"p-3",
"shadow-[0_12px_24px_#16324f33]",
"shadow-none",
"shadow-panel",
"text-ink"
]
}
}
}Authored demonstration CSS
.wind-demo-shadow-grid { display: flex; flex-wrap: wrap; gap: 1.1rem; max-width: 36rem; padding: 0.8rem; color: #16324f; font: 14px/1.45 system-ui, sans-serif; }
.wind-demo-shadow-card { min-width: 8rem; }Custom and named values
A named value such as shadow-panel resolves only from tokens.shadows. shadow-none is the supported keyword for no shadow. Bracket values are validated as CSS box-shadow values, with underscores separating spaces in a class candidate. There is no default shadow scale and no shadow opacity modifier. The catalog does not add ring utilities.
Related guides: Utility grammar · Variants
Catalog details
shadow
| Field | Value |
|---|---|
| Catalog identifier | v1.shadow |
| Class pattern | shadow-<suffix> |
| Grammar | {"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"box-shadow","allowsFractionSlash":false,"allowsColorOpacity":false} |
| Accepted values | 1 |
| Token categories | shadows |
| Negative-value policy | forbidden |
| Conflict group and rank | shadow (33) |
| Order rank | 0 |
| Selector shape | ownElement |
| Spec version | 1 |
| Emitter properties | box-shadow |
Accepted values
| Kind | Suffix | Emitted value |
|---|---|---|
keyword | "none" | "none" |
Declaration templates
| Property | Value kind | Fixed value |
|---|---|---|
box-shadow | resolved | null |
Catalog examples
| Example class | Expected declarations |
|---|---|
shadow-none | box-shadow: none |