CSS Frosted Glass

It's a cold, cold world

For some time now, users of native apps, that is applications for macOS and, recently, Windows, could observe a special kind of "material" for some views of those apps. Instead of a plain or semi-transparent color, certain elements looked like a frosted glass, letting you see through the element itself down to the underlying views but with a blurred vision.

A very early version of this special coloring was used in the first Mac OS X versions, although more transparency than blur was used. The first real wide usage came with Apple's iOS 7, followed by Microsoft's Fluent UI and now macOS Big Sur.

But did you know that as a web developer, this very tasty and good-looking styling is now possible to use with CSS in most browsers? Let's take a look at it!

Employee of the month: backdrop-filter

To use some frosted glass in your web app (or translucency, as Apple likes to call it), just apply the backdrop-filter-property to your CSS-definition:

.navbar {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px) saturate(160%) contrast(45%) brightness(140%);
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(45%) brightness(140%);
}

In fact, this is the very same styling we're using for this site's navbar. As not all browsers are supporting the feature yet, we have to make sure only compatible clients use it. CSS' @supports to the rescue!

@supports (-webkit-backdrop-filter: blur(30px) saturate(160%) contrast(45%) brightness(140%)) or
  (backdrop-filter: blur(30px) saturate(160%) contrast(45%) brightness(140%)) {
  .navbar-b.navbar-reduce {
    transition: all 0.5s ease-in-out;
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px) saturate(160%) contrast(45%) brightness(140%);
    -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(45%) brightness(140%);
  }
}

As you can see, we're checking if either backdrop-filter or the -webkit-*-variant are supported. If not, the styling gets defined for all other browsers outside of @supports as a fallback. Thanks to CSS or-operator, we can simplify the check even further.

To create your frosted glass of desire, just combine some modifications usable with backdrop-filter (blur, brightness, etc), toy around until you're happy, and deploy!

Also make sure to trial-and-error larger areas using the backdrop-filter on weak devices using Chrome, as its implementation isn't a fast as Safari's as of writing.

- Tom