How to change the color of a PNG image via CSS?

Spread the love

Sometimes, we want to change the color of a PNG image via CSS.

In this article, we’ll look at how to change the color of a PNG image via CSS.

How to change the color of a PNG image via CSS?

To change the color of a PNG image via CSS, we can use the filter property.

For instance, we write

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

to add an img element.

Then we write

img {
  filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg)
    brightness(95%) contrast(80%);
}

to add an img element with the filter property set to the color adjustments we want to make to the image.

Conclusion

To change the color of a PNG image via CSS, we can use the filter property.

Leave a Reply

Your email address will not be published.