invert() CSS Function

Description

The CSS invert() function inverts the color samples in an image. This means that it replaces each color with its opposite on the color wheel. For example, black becomes white, red becomes green, and yellow becomes blue.

The invert() function can be used to create a variety of effects, such as:

• Creating a dark mode for your website
• Highlighting text or images
• Creating a sense of contrast

To use the invert() function, simply add it to the filter property of the element you want to affect. The value of the invert() function can be a percentage value or a number. A value of 100% will completely invert the colors of the element, while a value of 0% will leave the colors unchanged. Values between 0% and 100% will produce a partial inversion effect.

Here is an example of how to use the invert() function:

.inverted-text {
  filter: invert(100%);
}

This will invert the colors of all text elements with the inverted-text class.

Tips for using the invert() function

• Be careful not to overuse the invert() function, as it can make your website difficult to read or use.
• Use the invert() function in conjunction with other CSS properties, such as opacity and contrast, to create more subtle and nuanced effects.
• Test the invert() function on different devices and browsers to make sure it looks good for all users.

Example

Here is an example of how to use the invert() function to create a dark mode for a website:

.dark-mode {
  filter: invert(100%);
  background-color: black;
  color: white;
}

This will invert the colors of all elements with the dark-mode class. When a user clicks a button to switch to dark mode, the dark-mode class will be added to the body element, and the entire website will become dark.

The invert() function is a powerful tool that can be used to create a variety of effects. By using the invert() function in conjunction with other CSS properties, you can create a website that is both visually appealing and accessible to all users.

Syntax

invert() = invert( <number-percentage>? )

Values

• number-percentageA value of 0 leaves the image original. A value of 100% or 1 completely inverts the colors of the picture. Values ​​from 0% to 100% or from 0 to 1 invert colors partially.

Example

<img class="invert" src="images/nature.jpg" alt="Invert Example">

.invert {

   filter: invert(100%);

}

Browser Support

The following table will show you the current browser support for the CSS invert() function.

Desktop
12	53	35	40	9.1

Tablets / Mobile
53	35	41	9.3	6	4.4

Last updated by CSSPortal on: 7th October 2023