Newly Available
Gradients
id: gradient-interpolation
Gradient interpolation
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.
Baseline Status:
Achieved Newly Available on Jun 11, 2024 across core engines.
Desktop Browser Engine Support
Google Chrome
111
Supported
Mozilla Firefox
127
Supported
Apple Safari
16.2
Supported
Microsoft Edge
111
Supported
Mobile Browser Engine Support
Chrome Android
111
Firefox Android
127
Safari iOS
16.2
Specifications and References
MDN Browser Compat Data Keys:
css.types.gradient.conic-gradient.hue_interpolation_method ↗
css.types.gradient.conic-gradient.interpolation_color_space ↗
css.types.gradient.linear-gradient.hue_interpolation_method ↗
css.types.gradient.linear-gradient.interpolation_color_space ↗
css.types.gradient.radial-gradient.hue_interpolation_method ↗
css.types.gradient.radial-gradient.interpolation_color_space ↗
css.types.gradient.repeating-conic-gradient.hue_interpolation_method ↗
css.types.gradient.repeating-conic-gradient.interpolation_color_space ↗
css.types.gradient.repeating-linear-gradient.hue_interpolation_method ↗
css.types.gradient.repeating-linear-gradient.interpolation_color_space ↗
css.types.gradient.repeating-radial-gradient.hue_interpolation_method ↗
css.types.gradient.repeating-radial-gradient.interpolation_color_space ↗