iOS-like frosted glass effect with CSS
April 27, 2020
Apple likes to use a “frosted glass” look in their UI to show depth and control where your eye focuses. For an example of this click on a folder on the home screen. The rounded rectangle containing the apps in the folder moves to take up most of the screen and everything “behind” it gets blurred. This effect use to be tricky or in many cases impossible to achieve on the web, but that’s finally changing with backdrop-filter
.
backdrop-filter
was actually introduced a few years ago in Safari, but it’s taken a while for other browsers to catch up. With Chrome adding support last year Firefox is now the last major holdout, and hopefully it will be added soon. Until then it can be enabled in your browser by going to about:config and setting gfx.webrender.all
and layout.css.backdrop-filter.enabled
to true
. For your users who probably haven’t turned it on themselves I’ll show you how to use @supports
to add a fallback.
backdrop-filter
works a lot like filter
, only the filter is applied to the element behind the element you’re targeting. As such, you can use any value filter
can use; but for this we’ll be using blur
. Also, you’ll need to actually see the background element so make sure you give a little transparency to the foreground element.
.foreground-element {
background-color: rgba(255, 255, 255, 0.5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
And that’s it! Note that if you’re using something like Autoprefixer (and I definitely recommend that you do) you won’t need that line with the -webkit-
browser prefix. It’s now working in most browsers, but I did say I’d show you how to add a fallback so let’s do that now.
.foreground-element {
background-color: rgba(255, 255, 255, 0.9);
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background-color: rgba(255, 255, 255, 0.5);
}
}
Since 0.5
is way too transparent without the blur we put that inside the @supports
block and add a background-color
with a higher alpha value as an alternative. I’m using SCSS here but if you’re not you just won’t be able to nest @supports
inside of .foreground-element
.
Here’s an example of it in action:
See the Pen iOS-like frosted glass effect with CSS by Justin Blaisdell (@jsblaisdell) on CodePen.