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 tin

Answer 1

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.