Menu Close

How to change color of PNG image via CSS?

Codeamend

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.

Posted in CSS

You can also read...