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
/* 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
sRGBorlinearRGBspaces 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-interpolationproperty 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 |
<color-interpolation-method>
<color-interpolation-method> =
in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]
<rectangular-color-space> =
srgb |
srgb-linear |
display-p3 |
display-p3-linear |
a98-rgb |
prophoto-rgb |
rec2020 |
lab |
oklab |
<xyz-space>
<polar-color-space> =
hsl |
hwb |
lch |
oklch
<hue-interpolation-method> =
[ shorter | longer | increasing | decreasing ] hue
<custom-color-space> =
<dashed-ident>
<xyz-space> =
xyz |
xyz-d50 |
xyz-d65
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.
<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>
<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>
svg {
display: block;
}
#linearRGB {
color-interpolation: linearRGB;
}
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # ColorInterpolationProperty |
Browser compatibility
See also
<linearGradient><radialGradient>- SVG
color-interpolationattribute