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 … Read article “Backdrop Filter effect with CSS”

The post Backdrop Filter effect with CSS appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.