How to Invert Color using CSS Filter

CSS allows you essentially full control over the design of a web page.

One of the most unique ways to use CSS is to invert the colors of a page.

Thankfully, CSS makes is straightforward to do this.

In this post, we'll learn how we can invert the colors of a page using the CSS.

How to invert the colors using CSS

When you invert the colors of a page, colors like white become black and vice-versa.

To invert the colors, we can use the CSS invert filter.

It can be applied to any element on the page and will invert the colors of that element.

Here's an example of how we can use it:

CSS
.invert-colors {
    background-color: white;
    filter: invert(100%);
}

The invert function takes a single argument, which is the percentage of the inversion.

Setting it to 0% will not invert the colors at all, and setting it to 100% will invert the colors completely.

The background-color is set to white so that we can see the effect of the filter.

Let's apply this class using this HTML:

HTML
<div class="invert-colors">
    <h1>Some text</h1>
    <p>Some text</p>
</div>

Try it out here:

You should see that the colors of the text and the background have been inverted and now the background is black and the text is white.

Keep in mind that this works on all elements, so you could invert even an entire video if you wanted:

HTML
<video class="invert-colors" controls>
    <source src="example.mp4" type="video/mp4">
</video>

CSS
.invert-colors {
    filter: invert(100%);
}

Conclusion

In this post, we learned how to invert the colors of an element using CSS.

Simply use the filter property and set it to invert with a percentage value.

Thanks for reading!

• Support Us
• Discord
• Share
• Post
• Share