Opacity
Set element opacity as an integer percentage or validated arbitrary value.
Set the opacity of an entire element, including its rendered descendants.
Quick reference
| Example class | Expected declarations |
|---|---|
opacity-55 | opacity: 0.55; |
opacity-[0.35] | opacity: 0.35; |
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 whole-element opacity
The swatch uses one configured background color at 100%, 55%, and an arbitrary 0.35 opacity; labels remain fully opaque outside each swatch.
<div class="wind-demo-opacity-list"><div class="wind-demo-opacity-row"><span class="wind-demo-opacity-label">100 percent</span><div class="wind-demo-swatch bg-accent opacity-100"></div></div><div class="wind-demo-opacity-row"><span class="wind-demo-opacity-label">55 percent</span><div class="wind-demo-swatch bg-accent opacity-55"></div></div><div class="wind-demo-opacity-row"><span class="wind-demo-opacity-label">35 percent</span><div class="wind-demo-swatch bg-accent opacity-[0.35]"></div></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-opacity-list {
display: grid;
gap: .55rem;
max-width: 28rem;
color: #16324f;
font: 14px / 1.4 system-ui, sans-serif;
}
.wind-demo-opacity-row {
display: grid;
grid-template-columns: 8rem 1fr;
align-items: center;
gap: .8rem;
}
.wind-demo-swatch {
height: 2.4rem;
}
.bg-accent {
background-color: var(--zw-color-accent);
}
.opacity-100 {
opacity: 1;
}
.opacity-55 {
opacity: 0.55;
}
.opacity-\[0\.35\] {
opacity: 0.35;
}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-opacity-label": true,
"wind-demo-opacity-list": true,
"wind-demo-opacity-row": true,
"wind-demo-swatch": true
},
"safelist": {
"docs-preview": [
"bg-accent",
"opacity-100",
"opacity-55",
"opacity-[0.35]"
]
}
}
}Authored demonstration CSS
.wind-demo-opacity-list { display: grid; gap: 0.55rem; max-width: 28rem; color: #16324f; font: 14px/1.4 system-ui, sans-serif; }
.wind-demo-opacity-row { display: grid; grid-template-columns: 8rem 1fr; align-items: center; gap: 0.8rem; }
.wind-demo-swatch { height: 2.4rem; }Custom and named values
Integer suffixes are percentages from 0 through 100: opacity-55 emits 0.55 and opacity-100 is fully opaque. Bracket values accept a number from 0 to 1 or a percentage from 0% to 100%. This utility fades the whole element and its children together. Color slash modifiers work differently: they mix only a color property with transparent. Use element opacity carefully around small text and controls because it can reduce contrast.
Related guides: Utility grammar · Variants
Catalog details
opacity
| Field | Value |
|---|---|
| Catalog identifier | v1.opacity |
| Class pattern | opacity-<suffix> |
| Grammar | {"acceptedKinds":["integer","arbitrary"],"arbitraryProperty":"opacity","allowsFractionSlash":false,"allowsColorOpacity":false} |
| Accepted values | The catalog has no separate accepted-value records for this entry. |
| Token categories | No token category |
| Negative-value policy | forbidden |
| Conflict group and rank | opacity (34) |
| Order rank | 0 |
| Selector shape | ownElement |
| Spec version | 1 |
| Emitter properties | opacity |
Accepted values
The catalog has no separate accepted-value records for this entry.
Declaration templates
| Property | Value kind | Fixed value |
|---|---|---|
opacity | resolved | null |
Catalog examples
| Example class | Expected declarations |
|---|---|
opacity-50 | opacity: 0.5 |