How to Invert Color using CSS Filter
Table of Contents
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:
- HTML
- CSS
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!
- How to Install Node on Windows, macOS and Linux
- How to Set Up Cron Jobs in Linux
- How to deploy a .NET app using Docker
- How to deploy a PHP app using Docker
- Getting Started with Deno
- Getting Started with Sass
- How to Scrape the Web using Node.js and Puppeteer
- Getting Started with Moment.js
- Learn how to build a Slack Bot using Node.js
- Building a Real-Time Note-Taking App with Vue and Firebase
- Setting Up Stylus CSS Preprocessor
- Getting Started with Moon.js