Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Cross-Browser CSS Grayscale
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%);
}
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 */
}
@meetbryce

This comment has been minimized.

Copy link

@meetbryce meetbryce commented Feb 7, 2013

+1

@QassimHassan

This comment has been minimized.

Copy link

@QassimHassan QassimHassan commented Mar 26, 2013

thanks

@ozinepank

This comment has been minimized.

Copy link

@ozinepank ozinepank commented Mar 31, 2013

+1

@tabliu

This comment has been minimized.

Copy link

@tabliu tabliu commented Apr 20, 2013

Firefox15.0.1 can't used it

@zhlangi710

This comment has been minimized.

Copy link

@zhlangi710 zhlangi710 commented Apr 23, 2013

firefox 20.0.1 can't used it too

@MohamedFaramawi

This comment has been minimized.

Copy link

@MohamedFaramawi MohamedFaramawi commented Sep 4, 2013

This doesn't work on IE 10

@klaymen

This comment has been minimized.

Copy link

@klaymen klaymen commented Nov 3, 2013

Thanks!

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

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

This comment has been minimized.

Copy link

@Streamlinelv Streamlinelv commented Dec 16, 2013

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

@vidyaguntakandla

This comment has been minimized.

Copy link

@vidyaguntakandla vidyaguntakandla commented Oct 9, 2015

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

Plz help..

@ErikVeland

This comment has been minimized.

Copy link

@ErikVeland ErikVeland commented Feb 3, 2016

Safari 5.1? What year is this?

@ninjaonsafari

This comment has been minimized.

Copy link

@ninjaonsafari ninjaonsafari commented Jun 30, 2016

doesnt work in ie 11

@ahmedam55

This comment has been minimized.

Copy link

@ahmedam55 ahmedam55 commented Jul 10, 2016

doesn't work on ie 11

@andrienko

This comment has been minimized.

Copy link

@andrienko andrienko commented Sep 14, 2016

Clearly does not work on IE11 by default.

@Fallenstedt

This comment has been minimized.

Copy link

@Fallenstedt Fallenstedt commented Apr 13, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.