invert() CSS Function

The invert() CSS function is used to invert the colors of an element, producing a negative of its original colors. It works by inverting the brightness of each pixel: black becomes white, white becomes black, and other colors are flipped to their complementary colors. This can be particularly useful for creating visual effects such as dark mode adjustments, highlighting elements, or emphasizing images without modifying the source content.

When invert() is applied, it is typically used with the filter property, allowing you to combine it with other functions like grayscale() or blur() for more complex visual effects. The function accepts a value between 0 and 1, where 0 leaves the element unchanged, and 1 fully inverts the colors. Values between 0 and 1 produce partial inversion, allowing for subtle adjustments.

For example, applying invert(1) to an img element will turn a photograph into a photographic negative:

img {
  filter: invert(1);
}

You can also combine it with other filters for creative effects:

img {
  filter: invert(0.7) grayscale(0.5);
}

This will partially invert the colors while adding a muted grayscale effect, giving a stylized look without changing the original img source.

Because invert() affects the visual rendering, it does not alter the underlying img file or the document structure, making it safe for temporary visual adjustments or dynamic themes.