Show HN: CSS generator for a high-def glass effect
kris-kay | 420 points | 30day ago | glass3d.dev
There are lots of glassmorphism generators out there, but I wanted to push the effect further! This project is the result of months of experimenting with CSS property layering and battling browser quirks.
Cross-browser compatibility is actually the reason I rely on ::before and ::after pseudo-elements to build up the effect. Move the color/opacity to the main element, and you’ll get weird color bleed on the corners in Chrome. Move the texture, and it muddles the bevel’s specular highlight. Move the bevel, and it gets blurred out by the backdrop-filter. And so on!
Layers include: * Adjustable blur, brightness, and saturation (backdrop-filter) * Subtle translucent texture * Faux 3D bevel (using box-shadows, not an outline)
Glassmorphism is rather heavy on resources, so it’s best used as an accent and avoided on wide desktop elements. Should be compatible with recent versions of Chrome, Safari, and Firefox (desktop and mobile). If you spot bugs or rendering glitches, I’d love to know!
Side note: this is an early preview of a framework-agnostic glass SCSS/component library I’m building.
chrismorgan|30day ago
This suffers from the problem of only blurring using the pixels immediately behind the surface, as demonstrated well in https://www.joshwcomeau.com/css/backdrop-filter/#the-issue. That and the discussion in https://news.ycombinator.com/item?id=42302907 are good reading. If the backdrop is going to move underneath, this is fairly important; if it will be static, it’s not normally important.
kris-kay|30day ago
I did read Josh's great article and had a go at implementing the tutorials. Unfortunately, I ran into some issues with the border-radius via SVG mask bit. It worked great on a hardcoded element, but I still need to figure out how to make it work across a whole component library where the border-radius changes based on the user's branding and container-queries.
andrewmcwatters|30day ago
Josh’s solution also intuitively appears wrong to me because it seems to assume that nearby elements are emissive, and I can’t agree with that as a standard physical property of “materials” on the web.
I instead assume that materials are by default more similar to paper.
chrismorgan|30day ago
The backdrop blur is unrelated to the surface properties of the elements underneath: it’s about the frosted glass refracting light, and some of that light it refracts comes from beyond its bounding box, which a naive backdrop-blur won’t observe.
andrewmcwatters|29day ago
Frosted glass doesn’t pass through light of objects that are simply near by it. It doesn’t make physical sense. I understand the defect, but neither does this solution correctly fix the problem.
Note the circle before it intersects with the rect, without accounting for pixels beyond the bounds, the blur is incorrect because the kernel doesn’t take into effect the circle.
Note the blur after extending the kernel beyond the visible bounds. While the blur is correct, the albedo of the shape passing through the rect no longer makes sense. The circle is not emissive, and yet despite this, you see the blur of the circle behind the rectangle without it intersecting in a full-bright environment. Why can we assume the environment is full-bright? Because there is no lighting. Only albedo.
Neither are correct.
chrismorgan|28day ago
I have an inking of what you’re getting at now. I want to try modelling it with full ray tracing now (in the absence of a piece of actual frosted glass!), to convince myself if you’re right (I’m not sure one way or the other), but sadly I doubt I’ll get to it any time soon.
andrewmcwatters|28day ago
I used physical samples of pebbled glass, curved glass, and clear glass. You can get the same effect using curved glass because of how natural light bounces off of the surface of the subject object and onto the glass, but you don't get this pronounced of effect with a flat panel of glass, frosted or not.
It's too exaggerated for, say, a kernel of 32px.
nothrabannosir|29day ago
That article covers a bug in implementations of blurring in browsers. It shows how when a 200px red circle is fully covered by a blur with radius 16px, today you will see a 232px sized blurred circle. But when the circle is shifted down from under the blur, so there is one pixel of space separating the two, you would still expect to see 15 px of blurred red circle. Instead it goes 18, 17, 16, 0, 0, for every successive frame. That’s a bug.
chrismorgan|29day ago
It’s not an implementation bug, it’s a deliberate design limitation in the name of performance. (There are quite a few practical limitations on backdrops in the name of performance.)
It’s not impossible that this will be adjusted in the future in some way, like how browsers quite some years ago shifted to premultiplying colours so that a gradient from white to transparent doesn’t go through semitransparent grey, but browsers are acting according to spec.
andrewmcwatters|29day ago
It’s an implementation limit of a limited backing layer size. So no, it’s not a bug. But neither solution correctly blurs objects that insect with the layer.
account42|28day ago
I don't think either version is really more correct than the other. The default approximates an object that is directly behind the frosted glass while the tweaked version simulates an object that is much further away.
For me the tweaked version is much more distracting and looks more wrong due to conflicting depth signals.
jauntywundrkind|30day ago
Looks pretty good.
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
jasonthorsness|30day ago
I think this is a clever moat Apple created with Liquid Glass: they picked an effect that is easy to make a worse version of, but very hard to do the real/right way (and humans have an intuition for real/right because they see real glass every day). So any copycats will look worse in a way that's pretty obvious and Apple gets to keep the "premium-looking" product.
_benton|30day ago
I don't think it's that hard for someone with experience writing shaders to emulate. The moat is that it's almost impossible to replicate with browser technology, which hurts web-based ui systems and is still a big challenge with something like flutter or jetpack compose multiplatform.
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.
kris-kay|30day ago
I fully agree that Liquid Glass is almost impossible to replicate with browser technology without using 3D shaders. But I’m curious to know your opinion about why apps that rely on web views are inferior for users (apart from the above reason). I certainly think Apple thinks they are inferior, but I'm not sure how devs and users feel about it.
cyral|30day ago
Webview apps are limited to 60fps so they feel sluggish on iOS. Running them in safari with the 120fps dev option enabled they can feel like native, but then feel laggy when bundled into their own app.
_benton|29day ago
I suppose it's only the bad ones that I notice, but I can definitely get annoyed by UI that's janky, choppy, or close-but-not-quite native. It's jarring.
dylan604|30day ago
> I certainly think Apple thinks they are inferior, but I'm not sure how devs and users feel about it.
Does it matter at that point? Seriously asking.
starburst|30day ago
> Now they just need to figure out a way to push RN apps towards true native.
Isn’t that impossible? If I call native code via binding or their official language, the same thing will happens.
_benton|29day ago
I mean push the devs towards writing native swiftui.
gumby271|30day ago
I think the same is true for when they started using blurs everywhere. They knew Android OEMs would copy it in a worse way and shoot themselves in the foot. That's also why material design doesn't rely on blur effects, it needs to run well on much worse hardware.
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
dleeftink|30day ago
Here is one with SVG filters (can be compute intensive):
kris-kay|30day ago
That is a very impressive attempt at Liquid Glass! The whole cross-browser and cross-platform bit is still a challenge sadly → "Only works on Impeller, so Web, Windows, and Linux are entirely unsupported for now"
dotancohen|30day ago
I recently saw a large gold (plated) surface - larger than a hand. The effect the light played off of that metal was amazing, I've never seen the effect in small gold jewelry. Photographs and video just don't capture it. If Apple ever turns their attention to gold and manages to nail that effect, I would consider one of their devices just for that aspect.
dylan604|30day ago
Gold is really good at reflecting infrared which is why it was chosen as the coating for JWST's mirrors. I wonder if the colors just past visible on its way to IR would be just perceptible enough to give the look you are noticing???
dotancohen|28day ago
Might the gold have tinted some of the IR into a visible wavelength? A wavelength that is otherwise not commonly seen in nature?
kris-kay|30day ago
The moat is real! I haven't tried recreating Liquid Glass in the browser yet. From what I've seen, it's possible, but not in a practical, cross-browser, "can be applied to an arbitrary component" kind of way.
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.
9dev|30day ago
That is one way things could turn out. On the other hand, when Apple started to introduce the iOS-7-style frosted glass effects, we got backdrop-blur in CSS, which handles the hard parts of achieving a similar effect on the web.
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.
kris-kay|29day ago
> 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.
silvestrov|30day ago
I think you overestimate how much most users are able to detect such differences and will care about it.
Somewhat like the blind tasting tests of Coca Cola versus Pepsi versus supermarket brands.
dylan604|30day ago
Okay, I was with you about users caring about differences in the look of a glass refraction effect. But I'm flabergasted at the fact that there are people that cannot tell the difference between Coke and Pepsi by taste.
kevincox|29day ago
They literally said this is the reason in their marketing.
> 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.
altairprime|30day ago
I think the other component of the moat is that their OS/GPU stack is power-optimized for this effect in hardware, which generic solutions for generic hardware will have trouble matching - even a lower fidelity replication’s power drain could be an order of magnitude higher as a result.
kris-kay|29day ago
True, innovation is much easier when you have full control over the hardware. My project would have taken a fifth of the time if I were only targeting Safari on Apple devices. But I trust that clever engineers and developers will keep finding ways to optimize effects for other platforms and devices.
kris-kay|30day ago
I agree that Liquid Glass's edge distortion looks great, and I will try my hand at recreating it eventually. For the current project, I aimed to create a material that looked polished, worked consistently across browsers, and didn't use real 3D. And you're right about the effect being more visible when moving over a fixed background. The demo site I'm working on for the library does this, it's just not ready yet.
Thanks for sharing the resources!
incrudible|29day ago
> 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
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.