24 June 2012

Cross-Browser Image Grayscale with CSS

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.