DEV Community

loading...

Discussion on: Backdrop Filter effect with CSS

Collapse
shadowscientist profile image
Shadow Scientist • Edited

Good thought! here is a point to note that currently backdrop-filter is an experimental CSS3 property that have only support in Safari. However, caniuse.com indicates that it has support on Chrome 76 and higher but I don't see any changes as I'm using Chrome 79 at present.

Sadly Firefox doesn't support it at all, but it has a mysterious property -moz-element(#target) which can be used as a fallback with a combination of ::before & ::after elements for Gecko based browsers. Agreed with @rk_jsorbit. as well. :D

Thank you for sharing the tip. I hope you'll keep sharing more useful thoughts. Have a nice one! ;)

Collapse
urielbitton profile image
Uriel Bitton Author

thanks for sharing man! Chrome works perfectly fine indeed, and i beleive all chromium based browsers too.

Collapse
jasonli9933 profile image
JasonLi-9933

Thanks for the sharing! The feature can be enabled in Firefox by setting the layout.css.backdrop-filter.enabled to true in about:config. For more info check out the caniuse.com/#search=backdrop-filter

Collapse
urielbitton profile image
Uriel Bitton Author

Nice thanks for that!

Collapse
shadowscientist profile image
Shadow Scientist

Thanks for the reply. I've already enabled it in Firefox 79 but still no luck, I don't see the backdrop, only the fallback of background:rgba(0,0,0,0.1). Here is a snapshot:

about:config
Backdrop filter in Firefox

I updated Chrome to v84 and did the same test and it works!

Backdrop filter in Chrome

Not sure what's wrong in Firefox.

Thread Thread
urielbitton profile image
Uriel Bitton Author

I think after some research that firefox doesn't have compatility unfortunately.

Thread Thread
shadowscientist profile image
Shadow Scientist

No worries, we've -moz-element! πŸ˜„

Thread Thread
simevidas profile image
Ε ime Vidas

FWIW, it works in Firefox Nightly after enabling that flag.

Thread Thread
urielbitton profile image
Uriel Bitton Author

Nice!

Thread Thread
scheinercc profile image
Al