CODEWITHSUNDEEP
cssfirefox
akis.pal
akis.pal

Reputation: 21

Backdrop-filter grayscale does not work for Mozilla

backdrop-filter: grayscale(1); works perfectly for chrome but not for firefox. Any idea how I could tackle this or find a workaround? Thanks

Upvotes: 0

Views: 2996

Answers (3)

Adrian Ciolea
Adrian Ciolea

Reputation: 921

Mozzila browser support for Backdrop Fillter says

From version 70: this feature is behind the layout.css.backdrop-filter.enabled preference (needs to be set to true) and the gfx.webrender.all preference (needs to be set to true). To change preferences in Firefox, visit about:config.

So to enable backdrop-filter on mozilla go to "about:config" (in the address bar) and set to true both layout.css.backdrop-filter.enabled and gfx.webrender.all.

Hope this helps, cheers!

Upvotes: 1

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

you will have to use filter: grayscale(100%); 

.bg {
  background: url(https://placeimg.com/200/200/any);
  filter: grayscale(100%);
}
<div class="bg">
  <h1>Title here</h1>
  <p>Nullam accumsan lorem in dui. Fusce a quam. Sed a libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
</div>

Upvotes: 1

Sharique Khan
Sharique Khan

Reputation: 182

I hope the below link would help you. You should add a prefix "-webkit-" like

eg:

> `-webkit-backdrop-filter: blur(10px);  
 backdrop-filter: blur(10px);`

https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

Upvotes: 1

Related Questions