Categories
CSS

How to invert colors of an image in CSS?

Spread the love

Sometimes, we want to invert colors of an image in CSS.

In this article, we’ll look at how to invert colors of an image in CSS.

How to invert colors of an image in CSS?

To invert colors of an image in CSS, we can use the invert CSS filter.

For instance, we write

<img src="https://picsum.photos/200/300" />

to add an image.

Then we write

img {
  -webkit-filter: invert(1);
  filter: invert(1);
}

to use the invert filter to invert the colors in an image.

Conclusion

To invert colors of an image in CSS, we can use the invert CSS filter.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *