![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigib8O3d8F3PS6XInfHKa_IRUKMbUqnYb98BY-WTsXjaZD5mmtxyyyxENv6S8CyTJVIfL54pfDA-GJJ8MmWKhzPf3kktn_U6IxWvHZaB_jYakVx26HAxdfMtWFQphXIU4hpaFjGYGnuJ0/s640/coolbus.png)
Update: I've extended my blog post into a full GitHub project, with JavaScript polyfill that switches out <img> tags with the SVG goodness that IE 10 and 11 need: https://github.com/kununu-labs/gray
To apply a grayscale effect (color desaturation) to images across Firefox 10+, Firefox on Android, Internet Explorer 6 - 9, Chrome 19+ and Safari 6+ on desktop and iOS, use the following snippet below.
To disable the effect again, apply:
Check out a demo, which includes fading back to color on hover, Internet Explorer 10 support with inline SVG, and partial grayscale.
Note: If you're experiencing issues with blurry images in Firefox, you can try playing with the filterRes attribute, but this will tie your image resolution to the svg code.