How to invert colors of an image in CSS?

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

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

How to invert colors of an image in CSS?

To invert colors of an image, we can use the invert CSS filter in CSS.
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

In CSS, we can use the invert CSS filter, to invert colors of an image.

Leave a Reply