Is there any way to colorize a white PNG image with CSS only?

Question

I know there are many css filters out there especially for webkit, but I can't find a solution for colorize a white (#FFFFFF) image. I've tried some combination of the filters, but none of them make my image colorized. I can only change the image in the range of grayscale, or sepia.

So my question is: Is there any way to change my totally white png to (for example) red using css only?

Like shown on this image:

Answer 1

This can be done with css masking, though unfortunately browser support is really bad (I believe webkit only).

http://jsfiddle.net/uw1mu81k/1/

-webkit-mask-box-image: url(http://yourimagehere); 

Because your image is all white, it is a perfect candidate for masking. The way the mask works is that wherever the image is white, the original element is shown as normal, where black (or transparent) the original element is not shown. Anything in the middle has some level of transparency.

EDIT:

You can also get this to work in FireFox with slight help from svg.

http://jsfiddle.net/uw1mu81k/4/

div {    width: 50px;    height: 50px;    mask: url(#mymask);    -webkit-mask-box-image: url(http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png);  }

<div style="background-color: red;"></div>  <div style="background-color: blue;"></div>  <div style="background-color: green;"></div>  <div style="background-color: orange;"></div>  <div style="background-color: purple;"></div>    <svg height="0" width="0">    <mask id="mymask">      <image id="img" xlink:href="http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png" x="0" y="0" height="50px" width="50px" />    </mask>  </svg>

Answer 2

I recently have the same question and I think this approach is worth sharing for future readers. Try this

filter: brightness(50%) sepia(100) saturate(100) hue-rotate(25deg); 

Brightness will darken the image, sepia will make it a bit yellowish, saturate to increase the color, and lastly hue-rotate to change the color. It's not cross browser friendly though:

• It's not supported on IE

• On chrome, hue-rotate(25deg) will make any image red, but you need negative value in firefox e.g. hue-rotate(-25deg) to make it red.
  You can use this to target mozilla browsers: https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/

Here are some useful tips and tools that I've used when I work with images/icons using css:

• If you have the svg version of the image, you can convert them to font icons using this tool https://icomoon.io/ . To change color you just need color:#f00; just like font colors.
• If you need to achieve this effect for hover state, Use red image with filter: brightness(0) invert(); on NON-hover state, and filter: brightness(1); on hover state. Hovever this will still won't work on IE
• Use sprite sheet. You can create yourself using image editing tool or use sprite sheet generators available online. Then, you can use SpriteCow to get the css for every sub-image of your spritesheet.