iOS-like frosted glass effect with CSS

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.