CSS Filter: Make Color Image With Transparency White
Answer : You can use filter: brightness(0) invert(1); html { background: red; } p { float: left; max-width: 50%; text-align: center; } img { display: block; max-width: 100%; } .filter { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } <p> Original: <img src="http://i.stack.imgur.com/jO8jP.gif" /> </p> <p> Filter: <img src="http://i.stack.imgur.com/jO8jP.gif" class="filter" /> </p> First, brightness(0) makes all image black, except transparent parts, which remain transparent. Then, invert(1) makes the black parts white. To my knowledge, there is sadly no CSS filter to colorise an element (perhaps with the use of some SVG filter magic, but I'm somewhat unfamiliar with that) and even if that wasn't the case, filters are basically only supported by webkit browsers. With that said, you could still work around this and use a canvas to modify your image. Basically...