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/

Starting in Firefox 35 (Jan 2015), the vanilla "filter:" CSS property will do the trick. https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility — akarve, Dec 30 '14 at 16:31

score 50 · Accepted Answer · answered Aug 29 '12 at 07:59

50

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

answered Aug 29 '12 at 07:59

defau1t

10,593
2
35
47

that works, but is it the only syntax to make it work? Doesn't the newer FF versions have simple syntax ? – user1251698 Aug 29 '12 at 08:03
1

@user1251698: I dont think so but you can have a look here https://developer.mozilla.org/en-US/docs/CSS/filter – defau1t Aug 29 '12 at 08:13
FWIW, [here is a losy invert filter version of this answer.](http://jsfiddle.net/4nLGG/) – Mazyod Mar 11 '14 at 05:25
How to unset the grayscale for firefox 3.5? – Roman Losev Apr 12 '16 at 07:15

aspirinemaga · Answer 2 · 2012-08-29T08:04:35.877

13

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

edited Aug 29 '12 at 08:04

answered Aug 29 '12 at 07:52

aspirinemaga

3,753
10
52
95

1

Have you tested your jsfiddle link it in your Firefox? In my browser the image totally disappeared. If i remove `filter:url(resources...` line, it will appear but no effect. – user1251698 Aug 29 '12 at 08:00
sorry, now it should work. i've updated the link in jsfiddle. – aspirinemaga Aug 29 '12 at 08:05

score 3 · Answer 3 · answered Sep 04 '15 at 07:00

I also had the problem that in Firefox 39.0 images completely dissappeared when I used

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

What solved it for me was to add "filter: grayscale(1)" - just like that:

filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;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\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
filter: grayscale(1); /* Firefox 39 (and above? Don´t know) */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

This made it work for me. Don't know what about IE 10+ though, haven't testet it

score 0 · Answer 4 · answered Aug 29 '12 at 08:26

0

This code will work for you 100%.

.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"); 
    filter: gray;
    -webkit-filter: grayscale(100%)
}

answered Aug 29 '12 at 08:26

supersaiyan

1,670
5
16
36

3

Did you just copy aspirinemaga's answer and strip the comments? – BoltClock Aug 29 '12 at 08:28
@BoltClock: Actually mine and same for aspirinemaga's answer. Bad part of SO. – defau1t Aug 29 '12 at 08:29
no i didnt.I have search for this question on google and find result from here http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html if answer is same then what can i do ? i dont think so u people write this by your own ? did you ? – supersaiyan Aug 29 '12 at 08:39
how to roll back filter effect suppose on hover? – Balram Singh Feb 04 '14 at 09:32

CSS Filter not working in Firefox

4 Answers4

Linked