How to change color of PNG image via CSS?

Spread the love

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

For instance, we write

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

to add the img element.

Then we write

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

to set the filter property to add the filters we want to the image.

We set the sepai tone, invert the colors, set the bright and contrast, and rotate the hue.

By John Au-Yeung