color-filter is a new inherited property that modifies color values used when rendering. It's syntax is similar to the filter property, and defines a transform function that is applied to a color.
Example:
.foo {
color: blue;
color-filter: invert();
}This would apply a channel invert to all the colors in properties matching .foo. In this case the text color would render as an orangey-yellow.
The set of filters available are the same as the current filter property, with the exclusion of those that move pixels (i.e. drop-shadow and blur).
Notes:
- Efficient because it only applies to color values at rendering time.
- Very convenient way to do a "dark mode" version of your site.
- Applies to color values, including those in gradients.
- Leaves images and emoji untouched.
- No nasty side effects of
filter
- No new stacking context
- Because it is inherited, descendants can change the value
color-filteris a new inherited property that modifies color values used when rendering. It's syntax is similar to thefilterproperty, and defines a transform function that is applied to a color.Example:
This would apply a channel invert to all the colors in properties matching
.foo. In this case the text color would render as an orangey-yellow.The set of filters available are the same as the current
filterproperty, with the exclusion of those that move pixels (i.e. drop-shadow and blur).Notes:
filter