1. Web
  2. CSS
  3. Reference
  4. Properties
  5. color-interpolation

color-interpolation CSS property

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

The color-interpolation CSS property is used in SVG to specify which color space to use for <linearGradient> and <radialGradient> SVG elements.

Syntax

css
/* Keyword values */
color-interpolation: auto;
color-interpolation: sRGB;
color-interpolation: linearRGB;

Values

This property is specified as one of the following keyword values:

auto

Indicates that the user agent can choose either the sRGB or linearRGB spaces for color interpolation. This option indicates that the author doesn't require that color interpolation occur in a particular color space.

sRGB

Indicates that color interpolation should occur in the sRGB color space. Defaults to this initial value if no color-interpolation property is set.

linearRGB

Indicates that color interpolation should occur in the linearized RGB color space as described in the sRGB specification.

Formal definition

Value auto | sRGB | linearRGB
Applies to <linearGradient> and <radialGradient>
Default value auto
Animatable discrete

Formal syntax

color-interpolation = 
  auto       |
  sRGB       |
  linearRGB

Example

In the first SVG, the color-interpolation property is not included on the <linearGradient> element and color interpolation defaults to sRGB. The second example shows color interpolation using the linearRGB value.

html
<svg width="450" height="70">
  <title>Example of using the color-interpolation CSS Property</title>
  <defs>
    <linearGradient id="sRGB">
      <stop offset="0%" stop-color="white" />
      <stop offset="25%" stop-color="blue" />
      <stop offset="50%" stop-color="white" />
      <stop offset="75%" stop-color="red" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="400" height="40" fill="url(#sRGB)" stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    no color-interpolation (CSS property)
  </text>
</svg>
html
<svg width="450" height="70">
  <title>Example of using the color-interpolation CSS Property</title>
  <defs>
    <linearGradient id="linearRGB">
      <stop offset="0%" stop-color="white" />
      <stop offset="25%" stop-color="blue" />
      <stop offset="50%" stop-color="white" />
      <stop offset="75%" stop-color="red" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>
  <rect
    x="0"
    y="0"
    width="400"
    height="40"
    fill="url(#linearRGB)"
    stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation: linearRGB; (CSS property)
  </text>
</svg>
css
svg {
  display: block;
}

#linearRGB {
  color-interpolation: linearRGB;
}

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# ColorInterpolationProperty

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content