v150 · CSS · Color · demo
Overlay Builder
Pick any CSS color and alpha percentage — see the alpha() expression update live and render as a translucent overlay over a checkerboard transparency grid.
Controls
--overlay-color: #0022ff;
background: alpha(from var(--overlay-color) / 50%);
Detecting
alpha() support…/* Chrome 150 — alpha() adjusts only the alpha channel */
.overlay { background: alpha(from #0022ff / 50%); }
/* Equivalent with RCS (verbose) */
.overlay { background: oklch(from #0022ff l c h / 50%); }
/* Equivalent with old rgba() (must hardcode channels) */
.overlay { background: rgba(0, 34, 255, 0.5); }
/* With a CSS custom property — only works with alpha() */
:root { --brand: #0022ff; }
.overlay { background: alpha(from var(--brand) / 50%); }
/* (oklch(from var(--brand) l c h / 50%) doesn't work in all browsers) */see also
- Token Transparency — alpha() with design tokens
- ChromeStatus entry
- CSS Color 5 spec — alpha()
- MDN — Relative colors
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗