flâneur

Next-level frosted glass with backdrop-filter • Josh W. Comeau

joshwcomeau.com · 5,508 words · saved by 1 readers

Glassy headers have become a core part of the “slick startup” UI toolkit, but they’re all missing that final 10% that really makes it shine. In this tutorial, you’ll learn how to create the most realistic lush frosted glass anywhere on the internet.

Introduction 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: Some Example Website https://www.joshwcomeau.com/example-website Some Website 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. Play/Pause Animation This effect helps us add depth and real

related reading