Question

How to recolor a white-on-transparent image to an arbitrary color using CSS?

How do I take a image with just white and transparent pixels (example) and recolor to, say, red or orange, using only CSS?

Question below was asked previously -

Change color of PNG image via CSS?

The answer says to use filters, but does not indicate what combination of filters would make it work. Are there any filter combinations that would allow me to change a white-on-transparent image to red?

To clarify: I would like to recolor the white portion of the image, not color the background. For example, I would like it red-on-transparent.

img {

  -webkit-filter: brightness(50%) saturate(200%) hue-rotate(90deg);

  }

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png

Answer 1

I played around a bit and found a possible solution to only paint the white parts:

img {

  display: block;

  background: black;

  -webkit-filter: brightness(.5);

}

.recolor {

  position: relative;

  display: inline-block;

  -webkit-filter: brightness(1) contrast(300%) invert(1);

}

.recolor:after {

  content: "";

  display: block;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background: rgba(0, 255, 255, 0.3);

}

<figure class="recolor">

  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/200px-White_Globe_Icon.png">

</figure>