Cross-Browser CSS Grayscale

grayscale-disable.css

img.grayscale.disabled {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

grayscale.css

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

+1

thanks

+1

Firefox15.0.1 can't used it

firefox 20.0.1 can't used it too

This doesn't work on IE 10

Thanks!

To use this in IE10, make the browser render in IE9 mode.

<meta content="IE=9" http-equiv="X-UA-Compatible">

What Klaymen says would work, but it is not a good practice.
You shouldn't force IE10 to render like IE9. I suggest that you check out this tutorial that solves grayscale images even on IE10 and IE11.

I suggest that you use this solution that is cross-browser friendly way making images grayscale even on Internet Explorer. Here is the demo - http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-ie11

can anyone help me in applying 'grayscale' in safari 5.1.... i tried filter: url as well.... it dint't support...

Plz help..

Safari 5.1? What year is this?

doesnt work in ie 11

doesn't work on ie 11

Clearly does not work on IE11 by default.

To everyone saying it doesn't work on ie11. Duh. https://caniuse.com/#search=filter