Gradient interpolation
Newly available since 2024-06-11
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.
Compatibility
- Chrome 111 Released on 2023-03-07
- Chrome Android 111 Released on 2023-03-07
- Edge 111 Released on 2023-03-13
- Firefox 127 Released on 2024-06-11
- Firefox for Android 127 Released on 2024-06-11
- Safari 16.2 Released on 2022-12-13
- Safari on iOS 16.2 Released on 2022-12-13
Specifications
BCD data
- css.types.image.gradient.conic-gradient.hue_interpolation_method
- css.types.image.gradient.conic-gradient.interpolation_color_space
- css.types.image.gradient.linear-gradient.hue_interpolation_method
- css.types.image.gradient.linear-gradient.interpolation_color_space
- css.types.image.gradient.radial-gradient.hue_interpolation_method
- css.types.image.gradient.radial-gradient.interpolation_color_space
- css.types.image.gradient.repeating-conic-gradient.hue_interpolation_method
- css.types.image.gradient.repeating-conic-gradient.interpolation_color_space
- css.types.image.gradient.repeating-linear-gradient.hue_interpolation_method
- css.types.image.gradient.repeating-linear-gradient.interpolation_color_space
- css.types.image.gradient.repeating-radial-gradient.hue_interpolation_method
- css.types.image.gradient.repeating-radial-gradient.interpolation_color_space