How to invert color using CSS

Here's a guide on how to invert an HTML element's color using CSS

Posted on August 25, 2021


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 👍

Related articles:

Level up your programming skills

I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.