Show HN: CSS generator for a high-def glass effect

16 kris-kay 6 7/2/2025, 3:51:03 PM 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.

Comments (6)

chrismorgan · 23m 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.

jauntywundrkind · 21m 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 · 1m ago

I think this is a clever moat Apply 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.

mbforbes · 29m ago

Really nicely done! It's always surprising to me how often computer graphics isn't "one weird trick" and more like "5 layered tricks." Doing it with cross-browser compat is an additional challenge.

Do you have a sense of which aspects are the most resource-intensive? Naively I would guess it's the backdrop-filter.

thecosas · 23m ago

I can see people using this to have their websites (or apps) fit into the design of Apple's OS 26 design language. Neat!

tempodox · 20m ago

Wow, that Video tab looks gorgeous. I still don't understand yet how it's actually done.