Gradient interpolationBaseline · Newly available

Gradient interpolation controls how the colors between gradient stops are calculated in CSS. For example, linear-gradient(to right in oklch longer hue, red, red); calculates in the oklch color space, with the hue going all the way around the hue circle from red back to red.

Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Jun 11, 2024.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–110Not supported

111+Supportedsince Mar 7, 2023

Current: 155

Edge

12–110Not supported

111+Supportedsince Mar 13, 2023

Current: 154

Firefox

1–126Not supported

127+Supportedsince Jun 11, 2024

Current: 157

Safari

1–16.1Not supported

16.2+Supportedsince Dec 13, 2022

Current: 27

MobileChrome Android

18–110Not supported

111+Supportedsince Mar 7, 2023

Current: 155

Firefox Android

4–126Not supported

127+Supportedsince Jun 11, 2024

Current: 157

Safari iOS

1–16.1Not supported

16.2+Supportedsince Dec 13, 2022

Current: 27

How to use

Every current browser supports this, but it only became Baseline on Jun 11, 2024. Use it as a progressive enhancement, or keep a fallback if you support older devices.

Example

Full syntax and examples are on MDN — see the links below.

Feature detection

CSS · check before using

@supports (background-image: conic-gradient(red, blue)) {
  /* styles that use conic-gradient */
}

/* or in JavaScript */
if (CSS.supports("background-image", "conic-gradient(red, blue)")) {
  // use it
}

Specification

drafts.csswg.org#interpolation-space ↗

Sub-features

Support for each part of the feature (12). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
<gradient>.conic-gradient.hue_interpolation_method	111	111	127	16.2	111	127	16.2
<gradient>.conic-gradient.interpolation_color_space	111	111	127	16.2	111	127	16.2
<gradient>.linear-gradient.hue_interpolation_method	111	111	127	16.2	111	127	16.2
<gradient>.linear-gradient.interpolation_color_space	111	111	127	16.2	111	127	16.2
<gradient>.radial-gradient.hue_interpolation_method	111	111	127	16.2	111	127	16.2
<gradient>.radial-gradient.interpolation_color_space	111	111	127	16.2	111	127	16.2
<gradient>.repeating-conic-gradient.hue_interpolation_method	111	111	127	16.2	111	127	16.2
<gradient>.repeating-conic-gradient.interpolation_color_space	111	111	127	16.2	111	127	16.2
<gradient>.repeating-linear-gradient.hue_interpolation_method	111	111	127	16.2	111	127	16.2
<gradient>.repeating-linear-gradient.interpolation_color_space	111	111	127	16.2	111	127	16.2
<gradient>.repeating-radial-gradient.hue_interpolation_method	111	111	127	16.2	111	127	16.2
<gradient>.repeating-radial-gradient.interpolation_color_space	111	111	127	16.2	111	127	16.2