color overlay png in html5/css3

Question

I have a lot of png-images, and now I want to change their color. I could open all these images in photoshop and add a Layer style - Color Overlay.

For example: http://www.iconfinder.com/icondetails/103303/128/arrow_right_sans_icon
Change the black color to gray.

But is there an easy way to do this with HTML5/CSS3?

Solution 1

It's possible with just CSS but has so major limitations it's far from a perfect solution.

HTML

<img src="http://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_right-128.png"/>

CSS

img {
    -webkit-mask-image:-webkit-linear-gradient(top, rgba(0, 0, 0,.4), rgba(0, 0, 0,.4));
}

The limitations being

• Webkit only
• Can only change black to something more transparent, i.e. grey. Colour masks are not possible.

See demo - Tested in Chrome 26.

Solution 2

(A bit late)

If you know the background will remain the same color throughout the entire website and you don't mind messing around a bit in Photoshop, you could of course fill the transparent part with your background color and cut out the icon to make that part transparent.

That way you can place a background color behind it and make it whatever color you want...

HTML

<img src="transparencyswitch.png" height="20" width="20"/>

CSS

img {
    background-color: grey;
}

Comments

[Makoto]

Examples link deaded.