The archive · Product Ideas · Product decision · 2025
Glass3D's generator stacks CSS layers to fake high-def glass across modern browsers
A web generator builds frosted-glass UI from stacked backdrop blur, texture and box-shadow bevels tuned to survive Chrome, Safari and Firefox quirks.
Glass3D
What it had to solve
There were plenty of glassmorphism generators, but the developer behind the Hacker News handle kris-kay wanted 'high-def' glass: a subtle translucent texture, adjustable blur, brightness and saturation, and a faux 3D bevel, not just a frosted pane. Months of experimentation showed each layer breaking in some browser—color bled at Chrome corners, texture muddled the bevel's specular highlight, and the bevel got blurred away by the backdrop-filter.
How it works
Glassmorphism—frosted, blurred interface panels—was everywhere in 2025 web design, and so were generators for it. Kris Kay, who posts on Hacker News as kris-kay, thought the existing tools stopped too early: they blurred what sat behind a pane but did nothing about texture, edge bevel or depth, the details that make glass read as glass.
Glass3D answers with CSS property layering. Backdrop blur, brightness and saturation sit on the element itself; a subtle translucent texture and a faux 3D bevel built from box-shadows sit on ::before and ::after pseudo-elements. The split is deliberate—move color and opacity to the main element and Chrome bleeds color at the corners, move the texture and it muddles the bevel's highlight, move the bevel and the backdrop-filter blurs it away.
The generator exposes adjustable blur, brightness, saturation and texture and produces code for recent Chrome, Safari and Firefox on desktop and mobile. The maker calls it an early preview of a framework-agnostic glass SCSS/component library, and warns that the effect is resource-heavy: best used as an accent, not spread across wide desktop elements.
Why it lands
- Layering beats one property: distributing blur, texture and bevel across element and pseudo-elements is what lets each layer be tuned without breaking the others.
- Treating browser quirks as the design constraint produced an effect that works in Chrome, Safari and Firefox rather than only in the maker's own browser.
- A generator plus code output makes the technique reusable: visitors leave with CSS they can apply, and the stated follow-up is a component library, not a one-off demo.
- Honesty about cost built trust: the maker says glassmorphism is resource-heavy and should be an accent, which the thread's performance-minded commenters took seriously.
What it did
The Show HN of 2 July 2025 drew 420 points and 117 comments. Developers argued about whether layered CSS can match Apple's Liquid Glass, why backdrop-filter samples only the pixels immediately behind a surface, and how expensive high-radius blur is on real hardware.
What you can take
Chasing a native look on the web paid off by breaking the effect into independent layers; the browser quirks stopped being enemies once each layer had its own surface to live on.
Since then
Inside the thread, Glass3D became a reference point for what pure CSS can and cannot do: commenters compared it with CodePen and Flutter attempts at Apple's Liquid Glass and linked Josh Comeau's explanation of why backdrop-filter samples only pixels immediately behind a surface. Kay agreed a faithful, cross-browser Liquid Glass clone is not practical in a component-library way and said the demo site for the library was still in progress. As collected in September 2026, the generator remains live at glass3d.dev with the library still an early preview.
Sources
spotted an error? The archive wants to know.
Your turn
You just read one. Describe the brief you are staring at, and see who has been given the same problem.
Free account · 3 free questions · no card