I Hand-Built Liquid Glass to Prove It Was a Waste of Time
Two hours to build it, a couple reverts to fix it, and Apple's already shipping a slider to remove it. Turns out I was half right.
I called Liquid Glass a waste of engineering time.
Then I spent two hours hand-building it on my own site, just to verify my claims. Then I spent way, way longer than two hours ripping out half of what I built. Turns out I was half right, and building it is what showed me which half.
Here's the whole receipt: what I tried, what I killed, and the rule I'd hand my past self before ever touching it again.
There are technically two Liquid Glasses
They cost wildly different things.
The first is basically free: use the platform's own components. In a native app, you rebuild it with Apple's latest developer tools, and your system buttons, tab bars, and sheets turn to glass for almost nothing. Better still, when Apple refines the design later, your app inherits their updates automatically. That's not rent. That's a software update.
The second is building the effect yourself. On web surfaces there's no system layer to inherit, so it's the only option you've got. That's the one I took on alextong.me. And it charges you twice for it.
What I actually built (and tore back out)
First, a description, or none of this lands: my personal portfolio site is dark and moonlit. There's a moon, some drifting fog, and little bats moving around in the background (in Dracula-themed fashion), and the content sits on top in frosted-glass cards you can see all that moving stuff through. Seeing the background move through the glass is the whole effect. It's also where all the rendering cost comes from.
I looked at a few of the open-source recreations floating around. None was a clean drop-in, so I built it in two layers.
The first layer is the cheap one: a plain CSS blur (the backdrop-filter property) with a soft moonlit sheen on the edge. One reusable .glass-card style, and every card on the site uses it. Cheap to run, easy to keep.
The second layer is the real iOS-26 Liquid Glass look: actual refraction, where the glass bends and warps the moon and fog behind it instead of just blurring them. That's the expensive part. It runs on an SVG filter (I adapted nikdelvin's open-source version), heavy enough that I only turned it on for capable desktop browsers and switched it off on phones and low-end devices. Everywhere else, it falls back to the cheap blur. (For the other small effects on the site, I went through 44 components on 21st.dev, picked four, and rebuilt them in plain CSS instead of installing libraries. Extra dependencies are their own kind of rent.)
Then I made my mistake. I switched that expensive refraction on for every card, not just the big ones up top. Suddenly a dozen cards were all bending the moving background at once, and scrolling completely fell apart on the site.
So I tried to claw the cost back, and mostly made it worse:
Hide the whole animated background (the fog, the moon, all of it) while you scroll. Too aggressive, the whole page flickered. Reverted.
Swap the glass for plain solid cards. Killed the cost instantly. But it also killed the entire point of the experiment, so, no. Put the glass back.
(The fix that actually stuck is next, and it's narrower than both of these.)
💵 Bill #1: it's expensive to render
What finally worked was surgical, because the problem was specific: every one of those glass cards has to redraw that expensive refraction from scratch on every single frame while you scroll on web. A dozen of them doing it at once tanked my scroll into a visible stutter. Worst frame: 142ms to draw. That’s not a dropped frame, that’s a hitch you feel in your thumb.
The fix was to stop paying for the effect at the one moment nobody can appreciate it anyway: mid-scroll. I wrote a controller (a ScrollStateController) that, the instant you start scrolling, swaps just the cards down to the cheap plain-frost version and leaves the moving background alone, then brings the full refraction back once you stop.
Getting that last part smooth was the fiddly bit, and where most of the real work went. Restoring all dozen cards at once was its own little hitch, so they come back a few per frame instead of in one lump. And slow scrolling fooled my first version: it has tiny pauses baked into it, so the code kept thinking you’d stopped and slamming the heavy effect back on mid-scroll. The version that actually works waits for a real gap, about a quarter-second of stillness, before it trusts you’re done. Worst frame dropped from 142ms to 33ms. The homepage went from a choppy 16 frames per second while scrolling to a smoother 23 fps.
One bug ate a full hour. My build tool was silently breaking the fix, quietly deleting one line of the effect, so it only worked when I forced it in with inline JavaScript instead of normal CSS. (For the engineers in the room: Lightning CSS was dropping the unprefixed backdrop-filter from a prefixed !important pair.) That’s the kind of thing you only catch staring at the browser’s computed styles at 1am...
And I couldn’t trust the usual performance tools here, because the standard one (Google’s Lighthouse) doesn’t measure scroll smoothness at all. So I built my own little test that actually scrolls the page and clocks the frame rate as it goes (npm run perf:scroll, if you want to copy the idea). Steal it, honestly, if you ship anything that animates while people scroll.
📞 Bill #2: Apple is dialing it back
Here’s the insane part. Apple is supposedly all-in on this glass look. It’s their biggest redesign in a decade, and everyone and their mom is rushing to copy it. But then look at what they actually did at WWDC 2026: they shipped a slider that literally turns it down, from full glass all the way to fully tinted. Basically a button to opt out of Liquid Glass completely.
And it wasn’t a one-off. The design language is here to stay, reporting is clear on that, but several releases since the initial launch have quietly added another way to tone it back down. iOS 26.1 added a tint toggle. 26.2 added a transparency slider for the lock-screen clock. iOS 27 made a version of that slider system-wide and re-tuned the material for readability, with sharper icons. On the Mac, the toolbars went more solid and uniform.
The people who said the maximal glass hurt legibility? Apple just proved them right. My honest read: the launch look overreached, and every one of these sliders is Apple quietly conceding it. But they’re not scrapping the glass, they’ve tied their whole cross-device design story to it. This is the same move they pulled with iOS 7: ship the bold version, then spend the next year sanding down the parts that hurt. The glass itself isn’t dying. The excess is. And if you hand-rolled that exact excess, you’re now maintaining the part Apple just made optional in early June.
😟 So should you build it?
Honestly, it depends where you are and how much money you have. Four situations, whether you're shipping a weekend project or a product with millions of users:
Native, using the platform's stock UI? Rebuild it with Apple's latest tools and the built-in bars, buttons, and menus turn to Liquid Glass for free, and they inherit Apple's future fixes. Just test it thoroughly, because content now slides under see-through bars and text can get harder to read.
Native, but with your own custom interface? (Most real products have some.) Yes, adopt it, but budget it as a real project. Stock bars, buttons, and menus turn to glass for free on recompile and keep inheriting Apple’s fixes. You don’t have to rip your custom views out either: paint Apple’s real glass material onto them with the system’s glass modifier and you still inherit its re-tuning (like the readability pass), just not the full stock-component behavior. Only what you hand-roll from scratch inherits nothing. So lean on stock where the brand doesn’t really really need custom, use the system glass on the custom parts that carry the brand, and hand-roll only where you’ve got no other option. Don’t leave it half-glass and half-flat, a half-updated app looks more broken than either.
Web, and the look genuinely IS the product? (A brand page, an interactive feature.) You can build it, but use the cheap frosted-blur version, not the heavy realistic refraction, keep it to a few pages, and check it doesn't stutter on a cheap phone. The biggest risk here is introducing severe lag to your web experiences just to implement something that is literally optional now.
Web, normal reading or app screens? Skip it. That's the default at scale. There's no free web version, so you'd pay full price, in scroll lag on your weakest devices.
One trap catches big companies especially. A lot of apps that feel native are really web pages wrapped in a thin native shell (the content is a webview, basically a browser window with no address bar). Those webview screens get none of the free glass. Only the truly native parts around them, like the tab bar, do. So "we have a native app, let's just switch the free glass on" quietly fails on the exact screens people spend the most time reading. If you want glass there, you're back to hand-building it at full web cost, performance tax and all. Which, going by everything I said above, usually means don't: treat those screens like the web, because that's what they are.
Take the free glass ONLY where it's actually free. Build it by hand ONLY where the look actually pays its rent.
If you're building it anyway, here's the map
I'm not the only one who's gone down this road, and the web recreations sort cleanly into three tiers. The tiers line up exactly with cost: the more realistic the glass, the more it costs to run.
Pure CSS, the cheapest, but really just frost with no true bending of what’s behind it: Kevin Bism’s pure-CSS recreation and FreeFrontend’s gallery.
SVG displacement, the real iOS-26 refraction, and where the render cost starts: Kube’s CSS + SVG writeup for the how-to, nikdelvin/liquid-glass is the one I actually adopted and ported, and rdev/liquid-glass-react is one of the most popular React drop-ins if you’d rather install than hand-roll.
WebGL / shaders, the most convincing and the most expensive: liquid-glass-studio runs the full effect (refraction, plus the faint rainbow split at the edges) on the GPU.
One caveat quietly undercuts the whole realistic end of that list: the SVG-displacement refraction only actually renders in Chrome and other Chromium browsers. In Safari and Firefox, all that work falls back to a plain blur, so a big chunk of your visitors never even see the effect you paid to build. One more reason the web version is a worse deal than it looks.
Off the web, it flips, but only on Apple’s own turf. On iOS there are ready-made wrappers that hand you the real system effect: callstack/liquid-glass for React Native, plus native options for Expo and Flutter. Those genuinely wrap Apple’s effect, which is the whole point: on the platform, it’s basically free. Android is the catch, there’s no system Liquid Glass there to wrap, so the Android libraries reimplement the look from scratch, the same tax as the web. Free where Apple hands it to you, rented everywhere else.
I still did it, for my personal site, where the look basically IS my product. Eyes open, all costs accepted. But I paid twice to build the exact thing Apple is now handing users a slider to dial down, which definitely irks me in a weird way.
We’re not building an asset that will appreciate here. We're renting the one part of the look Apple just made optional.
What's the last visual effect that cost YOU a few reverts and a couple hours of your life before it finally stuck? Hit reply, y'all, I read every single one.
🧛