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 fil

Answer 1

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.