invert() | CSS-Tricks

The CSS invert() function inverts an element’s color pixels into their opposite (or negative) value. It is used with the filter property, which allows 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.