loading...
Cover image for Backdrop Filter effect with CSS

Backdrop Filter effect with CSS

urielbitton profile image Uriel Bitton ・1 min read

Yesterday i came upon a really cool looking effect on a website and tried to reproduce the effect for a new web app i was developing. It had a transparent container create a filter backdrop on the background image behind it and it was really neat.

Here's the effect:
Alt Text

I tried the usual css property filter: blur(10px) but that only blurred the container itself and not the background behind the element. After some research i found a super simple one line css property to do just that. Since then i've been using it in every app or design i created (where appropriate).

here it is:

.container {
    backdrop-filter: blur(10px);
}

I had no idea that CSS property existed!

Now add a background image behind your container and watch the magic. Pretty cool right?

Note: Some browsers may not support the property. But the major ones like chrome, firefox and edge do.

Try it out and let me know what you think. Till next time!

Discussion

pic
Editor guide
Collapse
erik06 profile image
Erik

For Safari:

.container {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
Collapse
shadowscientist profile image
Shadow Scientist

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
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
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
Thread Thread
scheinercc profile image
Collapse
urielbitton profile image
Uriel Bitton Author

Nice thanks for that!

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
thorstenhirsch profile image
Thorsten Hirsch

Hmm... so you're using saturate(180%) in the backdrop-filter to cancel out the background color with opacity of your fallback...? There's a cleaner solution. You can check if the browser supports backdrop-filter and provide different css code, like with media queries:

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .blurred-container {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* slightly transparent fallback for Firefox (not supporting backdrop-filter) */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .blurred-container {
    background-color: rgba(255, 255, 255, .8);
  }
}
Collapse
alexanderjanke profile image
Alex Janke

Here's an overview of the browser support for backdrop-filter. Always check this when using more "special" css props :)
caniuse.com/#search=backdrop-filter

Definitely use the fallback option described by Rohit when using backdrop-filter

Collapse
link2twenty profile image
Andrew Bone

Still pretty good coverage though, around 75%

Collapse
alexanderjanke profile image
Alex Janke

True, but in general (not just css) there are some funky edge-cases in browsers out there so checking the availability never hurts. For example Safari doesn't support .ogg files - so if you have any audio on your page you'd better use mp3. Oof.

Collapse
georgehossa profile image
Jorge Ossa

Hey nice tip!
I share my testing:
codepen.io/jorgehossa/pen/ExPdqeX

Thanks!

Collapse
urielbitton profile image
Uriel Bitton Author

awesome man!

Collapse
zsociety profile image
f@society

Wow, that's awesome. I had no idea till now that this kind of trick exist. Thx for sharing

Collapse
urielbitton profile image
Uriel Bitton Author

You're most welcome!

Collapse
motz795 profile image
MOATAZ795

thank-you-from-my-heart-my-Brother

Collapse
urielbitton profile image
Uriel Bitton Author

you're welcome man

Collapse
aftabksyed profile image
Aftab Syed

Interesting.... Will try this blur option!

Collapse
urielbitton profile image
Collapse
urielbitton profile image
Uriel Bitton Author

Awesome man ill add it in thanks a lot!

Collapse
thecoppinger profile image
Charlie Coppinger

Thanks for sharing Uriel and Rohit

Collapse
urielbitton profile image
Uriel Bitton Author

youre most welcome Charlie!

Collapse
latz profile image
Latz

Really nice effect. Definitely gonna use this one in a project.

Collapse
urielbitton profile image