Invert Color using CSS

Updated on December 28, 2023 by Muhammad Zeeshan      ⏱ 5 min read

Share:

Manipulating colors with CSS is straightforward. You can invert any color using CSS whether it is the color of text or background. You can even create dark mode using this trick that I’m going to discuss in this tutorial.

In this tutorial, you will learn how to invert color using CSS. Plus, you will explore practical code examples. So, let’s jump in.

How to Invert Color in CSS

To invert color, we use CSS invert() function with filter property. Inside the function parenthesis, we pass one parameter which can be any number in decimal form from (0.1 to 1) or in percentage form from (1% to 100%).

The following syntax shows how to use the invert() function in CSS:

element {
    filter: invert(0.3);
}

Now, let’s invert the text color.

Invert Text Color using CSS

In the following HTML code, I created two paragraph elements with demo text inside them. And I also specified a class="mypara" for the first paragraph element to see the difference.

<p class="mypara">This is a random text.</p>

<p>This is another random text</p>

And here is the output before using any CSS:

Now, let’s look at the CSS below:

p{
    color: blue;
    font-size: 22px;
}

.mypara{
    filter: invert(0.9);
}

Code Output:

CSS Code Explanation:

• The above CSS contains two rules.
• In the first rule, I used an element selector to select all the paragraph elements ‘p’ and changed their text color to blue. And make the font-size 22px.
• Then, I used the CSS class selector to select the paragraph element with the class name 'mypara' and applied the filter property and used invert() function and set the parameter to 0.9.

So, what’s happening? You have seen the color difference in the output above. First, the color was blue as I specified but after using invert() on the first paragraph element using its class name then it inverted.

Let’s go ahead and see another example.

Invert Background Color with CSS

Now, this time I will define background-color to black and text color to yellow for the paragraph elements. And then using CSS color invert.

p{
    background-color: black;
    color: yellow;
    font-size: 22px;
}

.mypara{
    filter: invert(0.9);
}

Code Output:

In the following output, the default background-color for the paragraph element was black, and color of the text was yellow. But after inverting, it is blue text color and gray background-color as clearly shown below.

This above code output reveals that the invert() function not only inverts the text color but both the background-color and color also at the same time.

For example, if you have a black background-color of an HTML element then after applying invert(100%), it will invert the background-color white which is the complete opposite.

By the way, the following code does the same thing:

/* The following code will do the same thing */

.mypara{
    filter: invert(0.9);
}

/* or */

.mypara{
    filter: invert(90%);
}

What if you invert the image color in CSS?

Let’s see what happens.

Invert Image Color in CSS

In the following code, I used <img> an element and added an image in HTML.

<img src="cat.jpg">

The image is shown below.

Then, I applied the below CSS to invert the image color.

img{
    filter: invert(100%);
}

And now look at the image below 😀.

Note: You can use invert() function on any HTML element whether its <table>, <video>, <img> or any other HTML element.

Invert Color on Hover using CSS

You can also invert the color of text, background, or image when you mouse over an HTML element. In the following, I took the same previous HTML code which contains two paragraph elements.

<p class="mypara">This is a random text.</p>

<p>This is another random text</p>

The below CSS code syntax will create a hover effect that will make the color inverted when you mouse over the first paragraph element with the class .mypara.

.mypara:hover{
    filter: invert(90%);
}

The Output:

Same thing you can do to background-color or image.

Tip: You can learn more about hover text in this tutorial about How to Create Hover Text using HTML CSS.

Dark Mode using CSS Invert

This simple trick can convert web layouts to dark mode but only if used effectively. Otherwise, it will make it ugly😁. Here’s the simple CSS.

:root{
    filter: invert(100%);
}

You have to think a little. As you know it converts black to white and white to black if we use invert(100%). So, this tactic works perfectly, if the layout or container background-color is white and the text color is black.

Let me show you a quick example.

First, I create a paragraph using <p> in element.

<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    Blanditiis est, accusamus quidem voluptate hic veniam 
    adipisci id nulla, tempora sint voluptatem consequatur. 
    Nesciunt repellendus reprehenderit sunt? Adipisci in ullam quidem?
</p>

Then, I have the following CSS defined as the default CSS rule for all the paragraph elements as shown below.

p{
    color: #000000;
    background-color: #ffffff;
    font-size: 22px;
    padding: 10px;
}

The output before applying anything:

Now, let’s apply the invert filter.

p{
    filter: invert(90%);
}

And now the output after applying the filter is dark as shown in the following.

You can use the same technique for your web layouts.

Finally Done ✔, this is how you can invert color in CSS. Hope you liked the tutorial!

Don’t forget to help others by sharing this Tutorial!

Topic: CSS

About The Author

Muhammad Zeeshan

Hi everyone, I'm a Full Stack Web Developer and Technical Writer. I just love to share my knowledge to help others in this community. I mostly write about HTML, CSS, JS, MySQL, and PHP.