CSS Filter not working in Firefox

Question

I am trying CSS filter but it does not work in my Firefox (15.0) browser.

HTML:

<div class="google">      <img src="https://www.google.com/images/srpr/logo3w.png"> </div> 

CSS:

.google{        -moz-filter: grayscale(100%);     filter: grayscale(100%); } 

Demo: http://jsfiddle.net/xDJzU/

Answer 1

GrayScale has limitations to work in firefox using a -moz-filter.

To get it working use the below snippet:

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 3.5+ */ 

DEMO

Answer 2

Rewrite your css code with this one, assuming that you're trying to achieve a grayscale image:

.google{     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 3.5+ */     filter: gray; /* IE6-9 */     -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ } ​ 

Updated jsfiddle: jsfiddle link