How to invert color using CSS

CSS allows you to invert the color of an HTML element by using the invert() CSS function that you can pass to the filter property.

.invert{
  filter: invert(0%);
}

The invert() function accepts a decimal or percentage number value (from 0 to 1 and 0% to 100%)

filter: invert(50%); | invert(0.5); 

Here’s an example of fully inverting the color of a text paragraph:

<style>
  .invert {
    background-color: white;
    filter: invert(100%);
  }
</style>
<p class="invert">Hello there!</p>

The result will be as follows:

Because the default color of the text is black, the color is inverted into white with filter: invert(100%) syntax.

The background-color:white is added to the CSS class rule so that we can see the result of the color inversion.

When you have both background-color and color in one element, then the invert filter will invert both colors.

But if you only have the color property applied to the element, then the background color will not be inverted.

Here’s another example where the color green is inverted to purple:

<style>
  .invert {
    color: green;
    filter: invert(100%);
  }
</style>
<p class="invert">Hello there!</p>

The output will be as follows:

The invert filter can also be applied to other HTML elements, including a table, an image, and a video.

The following code:

<style>
  .invert {
    filter: invert(100%);
  }
</style>
<video controls width="250" class="invert">
  <source src="video.mp4" type="video/mp4">
</video>

Will produce the following output (The video source is from Big Buck Bunny ):

Now you’ve learned how to invert the color of HTML elements using CSS. Nice work 👍