CSS Convert an Image to Grayscale

For Firefox, it is not necessary to create a filter.svg file, you can use data URI scheme instead of
filter: url(resources.svg#desaturate); /* Gecko */ .


For IE, filter: gray; is only work for the image, it donesn’t work to grayscale the div which has background image.

Taking up the css code of the first answer gives:

Take care to replace “utf-8” string by your file encoding.

This method should be faster than the other because the browser will not need to do a second HTTP request.

Leave a Reply

Your email address will not be published. Required fields are marked *