CSS Archives

in this tutorial, we'll invert color of an HTML element using the CSS. The CSS allows you to invert the color of an HTML element by using the invert() CSS function that you can pass to the filter property. .invert{ filter: invert(0%); } The invert() function accepts a decimal or percentage number value (from 0 to 1 and 0% to 100%) filter: invert(50%); | invert(0.5); An illustration of how to completely invert a text's color is as follows: .invert { background-color: white; filter: invert(100%); } How To Use invert class in a Web Page Hello! invert color!

As we know, The default color of the text is black, the color is inverted into white when we applied invert(100%). We have added background-color:white in the CSS class rule so that we can see the result of the color inversion. Output: Invert Both colors: background and text color The invert filter will invert both the background color and the color of an element. The background color won't be inverted, though, if you only apply the color attribute to the element. Here’s another example where the color red is inverted to aqua: .invert { background-color: white; color: red; filter: invert(100%); } Hello there!

Output: How To Invert Color in a table The invert filter can also be applied to other HTML elements, including a table, an image, and a video. .invert { filter: invert(100%); } Field name Mandatory Allowed values Seconds Yes 0-59 Minutes Yes 0-59 Hours Yes 0-23 Day of month Yes 1-31 Month Yes 1-12 or JAN-DEC Day of week Yes | 0-6 or SUN-SAT Output: Conclusion: In this post, we learned how to invert the colors of an element using CSS. we have used the filter property and set it to invert with a percentage value.

Category: CSS

How to Invert Color using CSS Filter