csshsl

CSS Filter as a color modifier for one image


Is it possible to change, with the CSS Filter methods like HueRotate, Saturation, and Brightness, the color of a PNG drawn totally white? Like Photoshop's color overlay effect, but in CSS.

This would be a good solution to avoid creating lots of images that change only color. For example, a set of icons that have dark and light versions for a UI.


Solution

  • You can also colorize white images by adding sepia and then some saturation, hue-rotation, e.g. in CSS:

    filter: sepia() saturate(10000%) hue-rotate(30deg)

    This should make white image as green image.

    http://jsbin.com/xetefa/1/edit