Finally! Blurred backgrounds with CSS

I keep an “inspirations” folder of things that help me keep going. I have screenshots of affirming words from my app’s users, as well as exciting visuals such as color schemes. (I’m looking at you, every Kurzgesagt video ever made)

One such screenshot that I’ve been mesmerized by lately is one that I took from a Fluent Design doc.

Source: Microsoft Fluent Design Principles

Wouldn’t it be awesome if we could style HTML elements to look like some of these materials? Acrylic, smoked glass, whatever you’d call that teal cube. As of the latest Chrome version, we now can. (Also supported in Safari and Edge)

Previously, we’ve only had color and shape at our disposal to differentiate between UI components. Thanks to the new backdrop-filter CSS attribute, we can do things like this:

backdrop-filter: blur(3px) grayscale(50%)

Note how this differs from the older filter attribute:

filter: blur(3px) grayscale(50%)

By using blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, sepia, and saturate, we can finally make HTML elements feel like materials other than paper without expensive hacks that only work on static backgrounds.

But Matt! Isn’t this just wasted cycles? Keep It Simple Stupid!

The performance cost from cursory testing seems negligible. Demos that have dozens of moving objects behind a large blur still run at a smooth 60 fps. These filters could definitely be abused, but today Boardom only uses this in two places:

• the app header
• the end game dialog

This makes a lot of sense for the dialog, since it shows after a game is won / lost / drawn. If you didn’t see which move was made before the dialog comes up, you can still generally see which pieces are where without the background hurting readability of the dialog. It’s not jarring when the dialog animates in and out. TL;DR: It preserves visual context.

Finally, I feel we can do Fluent Design justice on the web:

By incorporating elements of the physical world, a Fluent experience taps into something fundamental. It uses light, shadow, motion, depth, and texture to organize information in a way that feels intuitive and instinctual.

So, how do I use this today?

1. Check out Mozilla’s backdrop-filter docs
2. Look at https://boardom.io for a live example. (see the header and end game dialog)
3. Don’t forget about backwards compatibility. Have a fallback for browsers that don’t support backdrop-filter.

If you’d like to see backdrop-filter in action, I invite you to check out my board game site Boardom.io. Activity is quiet right now, but if you invite a friend or play with me, we’ll get the party started.

Lastly, let’s keep the conversation going! Comment letting us know how you’re using backdrop-filter.