One of my all-time favourite CSS tricks is using backdrop-filter: blur() to create a frosted glass effect. I use it in just about every project I work on, including this blog!

Here’s a quick demo, to show what I’m talking about:

This is an example website showing how I typically use backdrop-filter to create glassy headers.

Notice that as the cupcake moves behind the header, it appears blurry, as it would if it was passing behind frosted glass.

This effect helps us add depth and realism to our projects. It’s lovely.

But when I see this effect in the wild, it’s almost always missing some crucial optimizations. A couple of small changes can make our frosted glass so much more lush and realistic!

In this post, you’ll learn how to make the slickest frosted glass ever ✨. We’ll also learn quite a bit about CSS filters along the way!