API
Backgrounds
Background color, alpha, and gradients.
--bg is the color; --bg-alpha multiplies into its alpha without touching the text. A gradient pairs a type with its stops: --bg-linear: to bottom in oklch; --bg-stops: var(--color-shade-600), transparent 20%. --bg: none clears the color and any gradient, at the base or a state.
Reference
| Utility | Writes | Value | Tiers | Notes |
|---|---|---|---|---|
--bg | background-color | color, or none (clears the color and any gradient) | breakpoints, states | works tier-only; --before-bg / --after-bg |
--bg-alpha | alpha of --bg | 0 to 1, multiplied into --bg's alpha | breakpoints, states | |
--bg-linear | background-image (linear-gradient) | gradient prelude: direction, in <color-space> | — | |
--bg-radial | background-image (radial-gradient) | gradient prelude: shape, position, in <color-space> | — | |
--bg-conic | background-image (conic-gradient) | gradient prelude: from <angle>, at <position> | — | |
--bg-stops | the gradient's color stops | comma-separated color stops | — |