invert()

The CSS invert() function inverts an element’s color pixels into their opposite (or negative) value. It is used with the filter and backdrop-filter properties, which allow us to apply varying visual effects, like blur(), grayscale(), sepia(), and yes, invert().

.element {
  filter: invert();
}

The CSS invert() function is listed in the Filter Effects Module Level 1 specification.

Syntax

The invert() function has the next syntax, which says how much you wish to invert the image.

invert(amount)

Officially, it is:

<invert()> = invert( [ <number> | <percentage> ]? )

Arguments

/* fully inverted */
filter: invert();
filter: invert(1);
filter: invert(100%);

/* partially inverted */
filter: invert(0.2); /* 80% inverted */
filter: invert(0.7); /* 30% inverted */
filter: invert(50%); /* 50% inverted. demo shows as full gray */

/* Normal */
filter: invert(0);
filter: invert(0%);

amount: The invert() function takes an optional amount argument, which can be a number or a percentage value, ranging from 0 to 1 and 0% to 100%, respectively. 0 (or 0%) are the lowest values, so they leave the image unchanged, while 1 (or 100%) are the highest values, completely inverting the image. You can increase the amount beyond 1 (or 100%), but they will max out at that point and will not invert the element’s colors any further.

Without an argument, the invert() function uses 1 as its default. In the case of an interpolation, say an animation or transition, the initial value is 0.

.element-1 {
  filter: invert(); /* default is 1 */
}

.element-2 {
  transition: filter 1s; /* default is 0 */

  &:hover {
    filter: invert(1);
  }
}

Flipping icon colors

Flipping icon colors without requiring a new file is a regular use of the invert() function. In web applications, you often use SVG/PNG icons (like logos, social icons, or status icons). If you only have a dark version of an icon, instead of creating a separate light version in a new image file, you can use the invert() function to flip, or reverse, the color so it appears light instead of dark.

.flipped {
  filter: invert(100%);
}

Switching to dark mode with `invert()`

We can technically use the invert() function as an alternative approach to toggling a design from light mode to dark mode. We apply the invert() function to the <body> element when the user prefers a dark color scheme, and again on images, videos, and iframes to make sure they are not inverted at the same time:

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    filter: invert(100%) hue-rotate(180deg);
    background: black;
  }

  /* Re-invert images/videos/iframes so they appear normal */
  img,
  video,
  iframe {
    filter: invert(100%) hue-rotate(180deg);
  }
}

Switch your browser’s theme to dark to check it out. It’s really nice.