Of course, as soon as we figure out how to get it done, Apple will move on to the next thing. I'm okay with that though. It was a bold move, and I can't imagine how much time and money Apple spent making Liquid Glass look that good.
Somewhat like the blind tasting tests of Coca Cola versus Pepsi versus supermarket brands.
It's fun seeing the attempts to mimic Liquid Glass though, the most impressive so far is this Flutter package: https://pub.dev/packages/liquid_glass_renderer
Stuff like React Native get it basically for free because their ui is still technically "native".
But apps that rely on web views are screwed and I'm sure Apple will be happy to push devs away from those solutions as they're inferior for users.
Now they just need to figure out a way to push RN apps towards true native.
Does it matter at that point? Seriously asking.
Isn’t that impossible? If I call native code via binding or their official language, the same thing will happens.
If this whole liquid glass effect catches on big time (which isn't out of the question right now), we might see something in the web platform that gives developers access to the platform primitives required to render it.
Why shouldn't there be an effort to make more OS UI elements available via HTML? There's no technical reason against it. So I'm not saying that is what's going to happen, but I don't think this is a kind of moat they created with the explicit intention to make web apps worse.
Yes, exactly! Personally, I’m glad that Apple invests in this kind of R&D. They push the whole field forward as others try to catch up. I doubt they’ll ever make their UI freely available to all other platforms, but I do hope CSS continues to add features that make these effects much easier to implement on the web.
> features an entirely new material called Liquid Glass. It combines the optical qualities of glass with a fluidity only Apple can achieve
https://www.apple.com/ca/newsroom/2025/06/apple-introduces-a...
But yeah, it is a pretty clever way to make most cross-platform toolkits stand out and create a desire to create true native apps which increases their moat and means that some apps will have only an Apple version (or a worse app on other platforms) rather than releasing the same app on all platforms.
Thanks for sharing the resources!
Good. I was already on the fence about frosted glass, but I absolutely hate the refraction effect, it is super distracting and will always look ugly in certain scenarios. Yes, it is how real glass behaves, but I do not care for that. It is like someone took the worst part of skeumorphism and doubled down on it, and I say that as someone who liked iOS better before version 7.
But missing out on the refractive aspect of glass takes away the strong visual separation of layers that IMO is Liquid Glass's biggest contribution.
Material has these wonderful designer resources showing how the app ought to be built of consistent moving layers, shown in 3D from the side. It's clear that there's these layers. But once you go 2d, put it all together, its incredibly hard for me to find all the features. The number of times that there's an action button in some corner that folks don't see massive. Motion sort of helps highlight the chrome vs content, but there's just so little thats visually defining.
Liquid Glass's biggest strength IMO is the edge distortion. That when the content moves, there's this non-linear motion that the human visual sense immediately picks up on. Static screenshots don't always look great, but in motion there's so much more distinction of elements than anything else I've seen.
And that key refractive element, that takes such huge advantage of human's motion sensing, is missing here.
I'd seen one other great web web demo, but am struggling to find it right now. I did find this one, which I don't think looks as good, and the performance is bad for me here on mobile. But it nicely breaks down steps and shows how complex a task this can be. Getting these edge distortions in is hard, and relying on SVG filters to do it is a brutal path to hack together. https://atlaspuplabs.com/blog/liquid-glass-but-in-css#breaki...
There is a collection of attempts (CodePen Spark) at Liquid Glass that I just found. Second link is one I thought did a pretty nice job, via very specifically pre defined / hard coded SVG. https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM