color-mix() with many colors + light-dark() for images

Chrome 150, Firefox 150 (both 2026); Safari pending for both.

Chrome 150Edge 150Safari noFirefox 150

`color-mix()` now takes any number of colors with weights, and `light-dark()` accepts images/gradients, so a hero background or icon can switch with the color scheme in one declaration.

Scheme-aware gradient

CSS

.fx-044{
  color-scheme:light dark;padding:32px;border-radius:12px;color:light-dark(#111,#fff);font:600 18px system-ui;
  background:linear-gradient(135deg,#dbeafe,#fbcfe8);
  background:light-dark(linear-gradient(135deg,#dbeafe,#fbcfe8),linear-gradient(135deg,#1e3a8a,#831843));
  border:2px solid color-mix(in oklch,#2563eb 40%,#ec4899 40%,#facc15 20%);
}

HTML

<div class="fx-044">Scheme-aware gradient</div>

Fallback: The plain `background` line above the light-dark() one and a two-color color-mix() keep Safari correct.

Source: developer.chrome.com/release-notes/150 and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150

Prompt

Where a gradient or image must change with the theme, use `background: light-dark(<light image>, <dark image>)` under `color-scheme: light dark`, preceded by a plain fallback declaration for Safari. For blended brand colors, `color-mix(in oklch, a 40%, b 40%, c 20%)` accepts more than two inputs in Chrome/Firefox 150+.