Next-level frosted glass with backdrop-filter • Josh W. Comeau
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 reali...
One of my favourite UI patterns is using `backdrop-filter` to create a “frosted glass” effect.
When I see this effect in the wild, though, it’s almost never as lush and realistic as it could be. There’s an important optimization that nobody makes.
✨ I share the secret sauce in my brand-new post:
02.12.2024 18:18
👍 964
🔁 138
💬 45
📌 31
Astro is going to the moon!
02.12.2024 22:47
👍 0
🔁 0
💬 0
📌 0
Does it work with chrome on ios too?
23.11.2024 22:22
👍 0
🔁 0
💬 1
📌 0
Go for it. It’s easy enough to pin to an older version for legacy projects.
20.11.2024 17:24
👍 2
🔁 0
💬 0
📌 0
What gif pops up when you type in your name?
19.11.2024 06:29
👍 2
🔁 0
💬 1
📌 0
👋 I’d like to be added too! Tinkering with all kinds of digital maps.
18.11.2024 13:00
👍 1
🔁 0
💬 0
📌 0
👋
09.11.2024 23:17
👍 0
🔁 0
💬 0
📌 0
Great writeup! I think browser support is kind of too low though, is there any polyfills out there or is that impossible to achieve reliably?
04.11.2024 22:12
👍 1
🔁 0
💬 0
📌 0
