grayscale in chrome via css

Problem

Is there a way to make a grayscale image in chrome via css?

I have tried this but doesn't work on latest version of chrome

Problem courtesy of: alex

Solution

support for native CSS filters in webkit has been added from the current version 19.0.1084.46

so -webkit-filter: grayscale(1) will work and which is better and easier approach than SVG for webkit...

Solution courtesy of: hjindal

Discussion

Another solution would be svg with a level of indirection.

Basically, <img src="wrapper.svg"/> where wrapper.svg applies an svg filter to the svg, and the svg has an image element pointing to your raster image. Works in Opera, Chrome, Firefox and probably IE10 (untested).

Here's a demo. You can pass in your own url if you encodeURIComponent it first. Note though that for passing in parameters to work it relies on scripting being enabled, so if you need to use it in <img> elements or in a css background image you'd need to generate the svg files on the server.

Discussion courtesy of: Erik Dahlström

Not yet, but Chrome 18 will support css filters (released later this year). SVG filters is only supported by Firefox. You should be able to find a consistent canvas+javascript solution though.

EDIT: See Erik Dahlström's post for alternate solution.

Discussion courtesy of: bennedich

Here's an HTML5 solution. Supported by current versions of Chrome: http://webdesignerwall.com/demo/html5-grayscale/

Discussion courtesy of: henryaaron

This recipe can be found in it's original form on Stack Over Flow.