v152 · css · shipped

Relative Alpha Colors (CSS Color 5 alpha() function)

A new CSS color function that takes an origin color and produces the same color at a different opacity — without having to repeat or decompose the color's channel values. Ships in Chrome 152 across desktop, Android, and WebView.

at a glance

Shipped in	Chrome 152 (desktop, Android, WebView)
Status	Enabled by default
Flag	None (Finch: CSSAlphaColorFunction)
Standards position	Gecko: shipped/shipping · WebKit: support
Spec	CSS Color Level 5 — Relative Alpha Colors
ChromeStatus	5070160203481088 — Relative Alpha Colors

why it exists

Relative color syntax (shipped in Chrome 119) lets you derive one color from another by referencing the origin color's individual channel values. To change only the alpha channel of oklch(0.6 0.15 240) you write:

oklch(from oklch(0.6 0.15 240) l c h / 50%)

This is verbose — you must repeat the color space name and list every channel just to keep them unchanged. When the origin color comes from a custom property the ceremony is even worse:

oklch(from var(--brand) l c h / 50%)

The alpha() function formalises the "change only opacity" pattern into a single, readable call. It is a pure shorthand: it produces an identical result to the longhand relative color form but without the boilerplate.

Source: CSS Color Level 5 §relative-alpha.

the function: syntax and grammar

/* Shipped Chromium CL 7666488 & CSS Color 5 grammar */
alpha([from <color>] [ / [<alpha-value> | none] ]?)

/* Equivalent comma form in early drafts */
alpha(from <color>, <alpha-value>)

Parameter	Description
`from <color>`	The origin color. Can be any `<color>` value — a keyword, hex, `oklch()`, `var()`, another color function, etc.
`<alpha-value>`	The desired alpha. A `<number>` (0–1) or `<percentage>` (0%–100%). Values outside the range are accepted but clamped at paint time.

The function returns a color identical to the origin in every channel (hue, lightness, chroma, etc.) with only the alpha replaced. The color space of the result is the same as the origin color.

Syntax divergence note: The normative CSS Color Level 5 editor's draft (§4.10, fetched 2026-10-07) and Chromium implementation (CL 7666488, 2026-03-20) specify the slash-separated form: alpha([from <color>] [ / [<alpha-value> | none] ]?) (e.g. alpha(from red / 0.5)). An earlier proposal draft used a comma-separated form alpha(from <color>, <alpha-value>). Where they diverge, implementations follow the slash-separated standard relative color syntax.

Source: CSS Color Level 5 §relative-alpha; Chromium CL 7666488.

examples

Fading a keyword color

/* 50% transparent red */
background-color: alpha(from red / 0.5);

/* equivalent longhand: */
background-color: rgb(from red r g b / 0.5);

Fading a design token

:root {
  --brand: oklch(0.55 0.18 250);
}

.overlay {
  /* 20% opaque version of --brand */
  background: alpha(from var(--brand) / 20%);
}

.hover-state {
  /* 70% opaque version of --brand */
  background: alpha(from var(--brand) / 70%);
}

Because alpha() works with any <color> — including var() references — it pairs naturally with design-token systems where the base color palette is stored in custom properties and variants are derived on demand.

Combining with light-dark()

/* Adaptive semi-transparent overlay */
background: alpha(
  from light-dark(black, white) / 30%
);

In a border shorthand

/* A slightly transparent version of the text color */
border: 1px solid alpha(from currentColor / 0.4);

comparison with relative color syntax

Pattern	Syntax
Relative color (longhand, any channel)	`oklch(from var(--c) l c h / 50%)`
`alpha()` shorthand	`alpha(from var(--c) / 50%)`

alpha() only applies when you want to keep all channels unchanged. For adjusting hue, lightness, or saturation you still use the full relative color syntax.

browser support

Browser	Support
Chrome / Edge	Chrome 152+ (enabled by default)
Firefox	Shipped (bug 2047437)
Safari	Support signal (WebKit/standards-positions #657)

Security and privacy: The alpha() function performs local CSS color computations without initiating network fetches, transmitting credentials, or exposing cross-origin data. When referencing currentColor, it inherits the existing text color privacy boundary.

Source: chromestatus.com/feature/5070160203481088.