Categories
backdrop-filter Link

Backdrop Filter effect with CSS

I love these little posts where some tricky-looking design is solved by a single line of CSS using a little-known property. In this case, the design is a frosted glass effect and the CSS property is backdrop-filter. The approach? Easy peasy: .container { backdrop-filter: blur(10px); } The comments in the post are worth looking into because they address cross-browser support. Coverage is actually pretty good. Caniuse shows 83% global coverage with Firefox (and, predictably, Internet Explorer) lacking support. One commenter offered a nice fallback, along with a small tweak that desaturates the effect: .container { background: rgba(0,0,0,0.8); backdrop-filter: saturate(180%) blur(10px); } Nice. But we can take it a little further by sprinkling @supports in there, as demonstrated in our background-filter Almanac entry: .container { background: rgba(0,0,0,0.8); } @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { .container { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } } Notice the -webkit prefix in there. It’s still worth using it in production, though that’s not a big deal assuming you’re wired up with Autoprefixer. Here’s the demo from the Almanac: CodePen Embed Fallback OK, so maybe not the one-line solution it appeared to be. But hey, it’s cool that this sort of thing is relatively trivial in CSS. Direct Link to Article — Permalink The post Backdrop Filter effect with CSS appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest Backdrop Filter effect with CSS

Read at the original Source: css tricks.