csssvgwebkitimage-manipulation

Tint image using CSS without overlay


Is it possible to tint an image with a specific color using CSS without an overlay in a WebKit browser?

Failed attempts

Ideas


Solution

  • Eventually it will be, using shaders. See the W3C Docs on Filters.

    At the moment, what is possible for instance is:

    -webkit-filter: grayscale; /*sepia, hue-rotate, invert....*/
    -webkit-filter: brightness(50%); 
    

    See

    Update:

    Adobe released its HTML5 based CSS Filter Labs with support for custom filters (Shaders) on supported browsers:

    enter image description here