Newly available Useful when Gradient interpolation adds emphasis or visual refinement without becoming necessary for understanding content.

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.

Effects

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.gradient.conic-gradient.hue_interpolation_method
111
111
127
16.2
111
16.2
CSS type
conic-gradient.interpolation color space

Interpolation color space
111
111
127
16.2
111
16.2
linear-gradient.hue interpolation method

Hue interpolation method
111
111
127
16.2
111
16.2
linear-gradient.interpolation color space

Interpolation color space
111
111
127
16.2
111
16.2
radial-gradient.hue interpolation method

Hue interpolation method
111
111
127
16.2
111
16.2
radial-gradient.interpolation color space

Interpolation color space
111
111
127
16.2
111
16.2
repeating-conic-gradient.hue interpolation method

Hue interpolation method
111
111
127
16.2
111
16.2
repeating-conic-gradient.interpolation color space

Interpolation color space
111
111
127
16.2
111
16.2
repeating-linear-gradient.hue interpolation method

Hue interpolation method
111
111
127
16.2
111
16.2
repeating-linear-gradient.interpolation color space

Interpolation color space
111
111
127
16.2
111
16.2
repeating-radial-gradient.hue interpolation method

Hue interpolation method
111
111
127
16.2
111
16.2
repeating-radial-gradient.interpolation color space

Interpolation color space
111
111
127
16.2
111
16.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
/* Gradient interpolation using OKLCH */
.vibrant-gradient {
  background: linear-gradient(in oklch, #ff0000, #0000ff);
}

/* Specify the hue interpolation direction */
.rainbow {
  background: linear-gradient(
    in oklch longer hue,
    oklch(0.7 0.15 0),
    oklch(0.7 0.15 360)
  );
}

/* Radial gradient */
.radial {
  background: radial-gradient(in lab, #ff6600, #0066ff);
}

Live demo

Oklchauxbetween

Gradient color interpolation OKLCHauxbetween demo.

PreviewFullscreen

Longer Hue reinbo-

Gradient color interpolation Longer hue reinbo- demo.

PreviewFullscreen

Labradialgradient

Gradient color interpolation Labradialgradient demo.

PreviewFullscreen

Use cases

  • Decorative enhancement

    Use Gradient interpolation to add depth, masking, blending, or special treatment to supporting visuals.

  • Brand expression

    Apply effects where the interface benefits from stronger visual identity but still works in simpler environments.

Cautions

  • Heavy effects can hurt performance or readability on lower-end devices.
  • Do not use visual effects as the only way to communicate meaning or state.

Accessibility

  • Maintain text contrast and focus visibility when applying overlays, filters, or blend effects.
  • Visual polish should never reduce content legibility.

Related links