Backdrop Filter effect with CSS

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:

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!

Comments

[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);
  }
}

[MOATAZ795]

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

[Uriel Bitton]

you're welcome man

[Šime Vidas]

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

[Uriel Bitton]

Nice!

[Al]

Here is the ticket: bugzilla.mozilla.org/show_bug.cgi?...

[Uriel Bitton]

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

[Jorge Ossa]

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

Thanks!

[Uriel Bitton]

awesome man!

[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

[Uriel Bitton]

Nice thanks for that!

[Latz]

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

[Uriel Bitton]

Enjoy man!

[Erik]

For Safari:

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

[Uriel Bitton]

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

[zimmer]

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

[Uriel Bitton]

You're most welcome!