DEV Community

Cover image for How to enable backdrop-filter in Firefox
Shounak Das
Shounak Das

Posted on • Updated on

How to enable backdrop-filter in Firefox

The CSS property backdrop-filter allows you apply graphical effects like blur and color filters to the background of your element. This property can help you create awesome effects in your webpage.

Author: Andy Adams

But, there is one problem. Its not supported in Internet Explorer and Firefox. The good news is you can enable it in Firefox. So, if you are a Firefox user, you can still test your webpages that use backdrop-filter. But, even if you enable it in your browser, most likely, it won't be enabled in your clients' browser. So, you should always design your pages so that it looks good with and without backdrop-filter enabled.

According to caniuse, backdrop-filter can be enabled in Firefox versions 70 and above. To enable this property, follow these steps:

  • Open a new Firefox tab and type about:config in the address bar. Press Enter.

  • You should see a warning. Click on the button saying Accept the Risk and Continue. This message is shown because on this page, all experimental features are present which may produce glitches when enabled and hinder performance, including the backdrop-filter.

Alt Text

  • Type layout.css.backdrop-filter.enabled in the search bar. You should see the value is set to false. On the extreme right, there is a reversible arrow (or whatever you call it). Click it to change the value to true.

Alt Text

Alt Text

  • Next, type gfx.webrender.all in the search bar. Its should also be false by default. Change it to true similarly.

Now you can close the tab and see backdrop-filter in action. Remember that it might produce glitches, so, don't panic, we can only wait for the developers to fix those glitches in the near future.

Happy Coding!😎

Top comments (9)

Collapse
 
hell0world profile image
DarioLopes

April 2021, still nothing, Firefox becoming the new IE, like it.

Collapse
 
merithes profile image
merithes

That's a very harsh judgement considering Firefox is still a pioneer in a lot of of browser implementations, while other browsers lag way behind like Safari which still lacks important features and doesn't support very important basic features. Also, Firefox has a backdrop-filter implementation, the release is just not public yet for security concerns

Collapse
 
piperunner profile image
Pipe Runner • Edited

Sorry, FF being a well known and one of the most used browsers, this is unexceptable. If tomorrow they stop supporting I don't know, anything crucial, don't go around patting them on the back saying they did other things better. This is just bad. 3+ years, and still not supporting something so basic. No offence if you are a fanboy/girl.

Collapse
 
shrihankp profile image
Shrihan

A cross browser alternative would be to use SVG Filters to "fake" the backdrop-filter effect.

Collapse
 
vankoosh profile image
vankoosh

FF has a coverage of 3.52% in US and 5.46% in Europe. Just sayin...

gs.statcounter.com/browser-market-...
gs.statcounter.com/browser-market-...

Collapse
 
9mza profile image
9MZa

Why not enable by default. 🤔

Collapse
 
deaddoctor profile image
deaddoctor

their backdrop-filter implementation is not ready yet.
firefox recently completely switched to their new rendering engine (webrender), they completely rewrite their rendering engine in Rust.
there are some bugs that are hopefully fixed and it can be enabled by default.
here's the bug tracker for this issue.
bugzilla.mozilla.org/show_bug.cgi?...

Collapse
 
jeongoon profile image
Myoungjin Jeon

hg.mozilla.org/mozilla-central/rev...

This is probably "default" on PC now. (probably not on mobile though)
Too long.. but I still respect the firefox.

Collapse
 
mohamad_mahdi-87 profile image
mohamadmahdi-87

Does this only work in my browser? Or does it work in the audience browser?