v151 · css · color
Layered Glass Compositor
Three overlapping glass panels derive their backgrounds from a single brand color at different alpha levels. Change the base color and all three layers update in lockstep — the power of from var(--brand) referencing one origin.
Panel A — 70%
alpha(from var(--brand) / 0.7)
Panel B — 40%
alpha(from var(--brand) / 0.4)
Panel C — 15%
alpha(from var(--brand) / 0.15)
--brand: var(--accent-emerald);
why this matters
Design systems need multiple opacity variants of a single brand color — backgrounds, borders, overlays, focus rings. Before relative colors, each variant was a hardcoded hex value that drifted when the brand color changed. With alpha(), all variants derive from one variable, so a theme switch is a single property change.