Inverting colors using CSS

Inverting the colors of an element or webpage using CSS is a simple task that can be accomplished using the filter property.

To invert the colors of a specific element, you can use the filter: invert(100%) property. For example, to invert the colors of a div element with the class “invert”:

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

To apply this style to the element, you can add the class to the element in your HTML:

<div class="invert">This element's colors will be inverted</div>

You can also use the filter property to invert the colors of the entire webpage by applying it to the body element:

body {
  filter: invert(100%);
}

You can also specify a percentage value other than 100% to adjust the intensity of the inversion. For example, to apply a lighter inversion to the colors, you can use a value of 50%:

.invert {
  filter: invert(50%);
}

It’s important to note that the filter property is not supported in all browsers, so it’s a good idea to include fallback styles for older browsers. You can do this by using the @supports rule to check for support for the filter property before applying it:

@supports (filter: invert(100%)) {
  .invert {
    filter: invert(100%);
  }
}

You can also use the -webkit-filter property to support older versions of Safari:

.invert {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

And that’s all there is to it! With just a few lines of CSS, you can easily invert the colors of any element or webpage.