How To Make an Image Greyscale in CSS

Posted by Nathan Wong on 14th May 2012

One common technique used on websites to add interactivity to a page involves rendering an image, or a set of images, in greyscale and switching back in a colour version when the mouse is rolled over.

This is typically achieved by using Javascript to replace the image inside a correctly positioned div. However, with the filter CSS3 tag having recently landed in webkit this is now an effect that it's possible to produce entirely using CSS.

Obviously having this functionality in webkit wouldn't usually be sufficient to roll this method out on the wider web, but fortunately both Gecko and Trident have broadly equivalent functionality to achieve the same effect.

Webkit

This method works from Webkit build 535.19, which was included in Chrome 18 and will work in Safari from version 5.2.

-webkit-filter: grayscale(1);

IE / Trident

Trident has included the filter function for... forever. So this should probably work most versions of IE.

filter: gray;

Firefox / Gecko

Gecko sadly hasn't yet implemented the full filter specification, but their existing implementation will allow you to combine their filters with an SVG layer in order to obtain the same effect. This requires an SVG file in addition to the css rule.

Which can then be included in as a rule:

filter: url(filters.svg#grayscale)

Conclusion

So we can put this together into a single ruleset:

Example