W3cubDocs

/CSS

color-interpolation-filters

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⁩.

The color-interpolation-filters CSS property specifies the color space for imaging operations performed via SVG filter effects. If explicitly declared, the value of the CSS property overrides any value given in the element's color-interpolation-filters attribute.

Note: The color-interpolation-filters property is only relevant to SVG filter operations. It has no effect on filter primitives like <feOffset>, <feImage>, <feTile>, and <feFlood>, but instead applies to the various filter effect elements (e.g., <feBlend>); see the SVG color-interpolation-filters page for a full list.

Note: It is important to remember that the SVG color-interpolation attribute has an initial value of sRGB, while color-interpolation-filters has an initial value of linearRGB. This means, in the default case, filter effect interpolations occur in a different color space than all other color interpolations.

Syntax

color-interpolation-filters: auto;
color-interpolation-filters: linearRGB;
color-interpolation-filters: sRGB;

/* Global values */
color-interpolation-filters: inherit;
color-interpolation-filters: initial;
color-interpolation-filters: revert;
color-interpolation-filters: revert-layer;
color-interpolation-filters: unset;

Values

linearRGB: Indicates that color interpolation should occur in the linearized RGB color space as described in the sRGB specification. This is the default property value.
sRGB: Indicates that color interpolation should occur in the gamma-encoded sRGB color space.
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.

Formal definition

Initial value	`linearRGB`
Applies to	The set of elements that control the output of a `<filter>` element in `<svg>`
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

color-interpolation-filters = 
  auto       |
  sRGB       |
  linearRGB

Specifications

Specification
Filter Effects Module Level 1> # ColorInterpolationFiltersProperty>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`color-interpolation-filters`	1	79	3	15	3	18	4	14	2	1.0	4.4	2
`auto`	1	79	3	15	3	18	4	14	2	1.0	4.4	2
`linearRGB`	28	79	22	15	9	28	22	15	9	1.5	4.4	9
`sRGB`	28	79	22	15	9	28	22	15	9	1.5	4.4	9