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
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...
Another solution would be svg with a level of indirection.
<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.
EDIT: See Erik Dahlström's post for alternate solution.
This recipe can be found in it's original form on Stack Over Flow.