Interactive online courses HTML Academy
2026-03-09 14:09 Diff
https://htmlacademy.org/courses/advanced-styling/css-filters/invert-saturate

Two more filters that can be used to create color effects are color inversion and color saturation. As the name implies, inverting the colors reverses them, thereby producing a “negative” image, whereas color saturation makes the colors brighter and higher contrast in a way similar to the color removal filter.

Color inversion is achieved using invert. Valid values range from 0 to 1, and percentages range from0% to 100%.

.effect { filter: invert(1); /* Full color inversion */ filter: invert(50%); /* Half color inversion, all colors are grayscale */ }

Color saturation is achieved using saturate. Valid values range from 0 or more, and percentages range from 0% or more. When the filter is set to a value of 1 or 100%, the element will be displayed unchanged. If it is set to zero, the image will become colorless in the same way as if you had used the grayscale filter.

.effect { filter: saturate(2); /* Colors that are twice as bright */ filter: saturate(50%); /* Colors that are twice as saturated */ filter: saturate(0); /* Total removal of colors from the image */ }