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:
- In the above code, we have created a <div>, and inside it has some text.
- In CSS, we select div using the element selector. Then we set the width, height, and red background color.
- To change the background color to invert, we need to set the “filter” property to invert(85%).
- 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:
- Here, we have created a <div> and within that 5 <p> tags.
- In CSS, we set the “orange” text color for div.
- 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.
- See the difference between the inverted text colors 0%, 25%, 50%, 75%, and 100%.