Why backdrop filter in Firefox don't work?

Question

I use backdrop-filter: blur(30px); but firefox unsupported this property; -moz-backdrop-filter: blur(60px); also doesn't work

Answer 1

Its not supported by default https://caniuse.com/css-backdrop-filter

However you can activate it manually.

Navigate to about:config and set it to true

Answer 2

As described on https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter, both layout.css.backdrop-filter.enabled and gfx.webrender.all have to be set to true.

Important: the browser must be restarted for it to work

Answer 3

I just wanted to point out that, as of yesterday, the newest Firefox Nightly Release does support backdrop-filter after enabling gfx.webrender.all and layout.css.backdrop-filter.enabled in about:config.

It will also be officially implemented in Version 102 (which will be released on 28.06.2022) as far as I could grasp that.