Tint image using CSS without overlay

css svg webkit image-manipulation
hpique picture hpique · Sep 22, 2012 · Viewed 73.2k times · Source

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

Lorenz Lo Sauer picture Lorenz Lo Sauer · Sep 22, 2012

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

Related questions

Overflow: Visible on SVG

Is it possible set overflow: visible on <svg> elements? This simple example on jsfiddle breaks in every browser I have access to, (some versions of Chrome and Firefox) as they act like overflow: hidden. Can anybody tell me …

Read More
How to change the color of an svg element?

I want to use this technique http://css-tricks.com/svg-fallbacks/ and change the svg color but so far I haven't been able to do so. I put this in the css but my image is always black, no matter what. …

Read More
How to change color of SVG image using CSS (jQuery SVG image replacement)?

This is a self Q&A of a handy piece of code I came up with. Currently, there isn't an easy way to embed an SVG image and then have access to the SVG elements via CSS. There are …

Read More