Background color
Set a background color from configured values or a validated arbitrary color.
Set an element’s background color independently of its text color.
Quick reference
| Example class | Expected declarations |
|---|---|
bg-panel | background-color: var(--zw-color-panel); |
bg-accent/18 | background-color: color-mix(in oklab, var(--zw-color-accent) 18%, transparent); |
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
Combine foreground and surface tokens
The light panel and dark accent are configured colors; text utilities keep the foreground readable on each surface.
<div class="wind-demo-backgrounds"><div class="wind-demo-card bg-panel text-ink">Light panel · configured surface</div><div class="wind-demo-card bg-accent text-white">Dark accent · white text</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-spacing-unit: .25rem;
}
}
.wind-demo-backgrounds {
max-width: 30rem;
font: 15px / 1.5 system-ui, sans-serif;
}
.wind-demo-card {
margin: 0 0 .65rem;
padding: .8rem 1rem;
}
.text-ink {
color: var(--zw-color-ink);
}
.text-white {
color: var(--zw-color-white);
}
.bg-accent {
background-color: var(--zw-color-accent);
}
.bg-panel {
background-color: var(--zw-color-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"
}
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo-backgrounds": true,
"wind-demo-card": true
},
"safelist": {
"docs-preview": [
"bg-accent",
"bg-panel",
"text-ink",
"text-white"
]
}
}
}Authored demonstration CSS
.wind-demo-backgrounds { max-width: 30rem; font: 15px/1.5 system-ui, sans-serif; }
.wind-demo-card { margin: 0 0 0.65rem; padding: 0.8rem 1rem; }Tint a surface without fading its text
bg-accent/18 blends the background color with transparency while text-ink stays fully opaque; the second card uses a one-off CSS color.
<div class="wind-demo-backgrounds"><div class="wind-demo-card bg-accent/18 text-ink">Accent at 18 percent over the white preview page</div><div class="wind-demo-card bg-[#e7f0f5] text-ink">Custom pale surface</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-spacing-unit: .25rem;
}
}
.wind-demo-backgrounds {
max-width: 30rem;
font: 15px / 1.5 system-ui, sans-serif;
}
.wind-demo-card {
margin: 0 0 .65rem;
padding: .8rem 1rem;
}
.text-ink {
color: var(--zw-color-ink);
}
.bg-\[\#e7f0f5\] {
background-color: #e7f0f5;
}
.bg-accent\/18 {
background-color: color-mix(in oklab, var(--zw-color-accent) 18%, transparent);
}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"
}
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo-backgrounds": true,
"wind-demo-card": true
},
"safelist": {
"docs-preview": [
"bg-[#e7f0f5]",
"bg-accent/18",
"text-ink"
]
}
}
}Authored demonstration CSS
.wind-demo-backgrounds { max-width: 30rem; font: 15px/1.5 system-ui, sans-serif; }
.wind-demo-card { margin: 0 0 0.65rem; padding: 0.8rem 1rem; }Custom and named values
A name such as bg-panel must be declared under tokens.colors. The keywords bg-current and bg-transparent are also supported. Arbitrary CSS colors use brackets, for example bg-[#e7f0f5]. Color slash opacity accepts whole-number percentages from 0 through 100 and mixes only the background color with transparent. It does not make the element’s text transparent. No Tailwind palette is assumed.
Related guides: Utility grammar · Variants
Catalog details
bg
| Field | Value |
|---|---|
| Catalog identifier | v1.background |
| Class pattern | bg-<suffix> |
| Grammar | {"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"background-color","allowsFractionSlash":false,"allowsColorOpacity":true} |
| Accepted values | 2 |
| Token categories | colors |
| Negative-value policy | forbidden |
| Conflict group and rank | background (23) |
| Order rank | 0 |
| Selector shape | ownElement |
| Spec version | 1 |
| Emitter properties | background-color |
Accepted values
| Kind | Suffix | Emitted value |
|---|---|---|
keyword | "transparent" | "transparent" |
keyword | "current" | "currentColor" |
Declaration templates
| Property | Value kind | Fixed value |
|---|---|---|
background-color | resolved | null |
Catalog examples
| Example class | Expected declarations |
|---|---|
bg-[red]/40 | background-color: color-mix(in oklab, red 40%, transparent) |