DEV Community

Backdrop Filter effect with CSS

Uriel Bitton on July 13, 2020

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 tran...

Read full post

Erik • Jul 15 '20

For Safari:

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

Thorsten Hirsch • Jul 25 '20

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

JasonLi-9933 • Jul 16 '20

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 • Jul 16 '20

Nice thanks for that!

Alex Janke • Jul 14 '20

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

Andrew Bone • Jul 14 '20

Still pretty good coverage though, around 75%

Alex Janke • Jul 14 '20

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.