CSS Invert Color

In this article, we will see How to create invert color using CSS. To create inverted color text, we need to use CSS “filter” property.

Syntax:

filter: invert(value);

The CSS filter property has the invert() value. We pass the percentage value like 50%, 80%, etc.

Example of creating a background invert color:

HTML:

<div>Invert Color</div>

CSS:

div{
         width: 50%;
         height: 100px;
         background-color: red;
         filter: invert(85%);
         color: white;
         text-align: center;
      }

Output:

1. In the above code, we have created a <div>, and inside it has some text.
2. In CSS, we select div using the element selector. Then we set the width, height, and red background color.
3. To change the background color to invert, we need to set the “filter” property to invert(85%).
4. See the above output, the red background color is changed into inverted color successfully.

We can also create inverted text colors, like this:

HTML:

<div><p class="Invert-0">Invert Color 0%</p>
<p class="Invert-25">Invert color 25%</p>
<p class="Invert-50">Invert color 50%</p>
<p class="Invert-75">Invert color 75%</p>
<p class="Invert-100">Invert color 100%</p>
</div>

CSS:

div{
      color: orange;
   }
.Invert-0{
      filter: invert(0%);
   }
.Invert-25{
      filter: invert(25%);
   }
.Invert-50{
      filter: invert(50%);
   }
.Invert-75{
      filter: invert(75%);
   }
.Invert-100{
      filter: invert(100%);
   }

Output:

1. Here, we have created a <div> and within that 5 <p> tags.
2. In CSS, we set the “orange” text color for div.
3. Then we select the 1st <p> tag and set the invert to 0%, 2nd <p> tag to 25% invert, 3rd <p> tag to 50% invert, 4th <p> tag to 75%, and finally 5th <p> tag to 100% invert text color.
4. See the difference between the inverted text colors 0%, 25%, 50%, 75%, and 100%.