Tint image using CSS without overlay

Question

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

Failed attempts

• Managed to tint the image sepia or an arbitrary color using hue-rotate but couldn't find a way to tint it with a specific color.
• Creating a "tint" SVG filter and calling it with -webkit-filter: url(#tint) doesn't work on Chrome.
• All possible combinations of opacity/box-shadow css properties with drop-shadow/opacity filters don't generate the desired effect.

Ideas

• Given a color, wouldn't it be possible to combine the HSB filters (hue-rotate, saturation, brightness) to generate its tint?

Answer 1

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

• David Walsh on CSS Filters
• Stackoverflow: apply a rose tint...:
• W3C Filter Effects 1.0 Docs - 38.2.5. Other uniform variables: the CSS shaders parameters

Update:

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

Answer 2

While there are no stand alone tint filter you can make kind of one by composition of existing filters without shading.

Combine sepia to unify the color, then hue-rotate to the color you want it to be tinted with

-webkit-filter: sepia(90%) hue-rotate(90deg); 

I use borders with an alpha value for my tints, its really an overlay but doesn't use any extra DOM elements making the transition to sepia+hue-rotate simpler when the other browsers get those filters.