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

Post by kevincox » Thu, Jul 03, 2025, 2:22 PM UTC

jasonthorsness wrote: post #7

jauntywundrkind wrote: post #5

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 f…

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.

Post by onli » Thu, Jul 03, 2025, 3:20 PM UTC

mikedelfino wrote: post #69

kris-kay wrote: post #59

Earlier quoted context omitted.

Interesting, no there are no scroll effects anywhere on the page. Would you mind sharing what device, browser, and level of internet connection you're using?

Never mind, I tried recording it now but could not reproduce it anymore. It was probably something on my phone at the time (Firefox on Android). I tried to remove or edit my previous comment but it seems it's not an option. Sorry for the noise.

Post by _benton » Thu, Jul 03, 2025, 3:43 PM UTC

starburst wrote: post #83

_benton wrote: post #24

Earlier quoted context omitted.

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…

> 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.

Post by cududa » Thu, Jul 03, 2025, 4:44 PM UTC

explosion-s wrote: post #102

I've made a JavaScript version that actually refracts elements on the page, check it out: https://real-glass.vercel.app/

Post by kris-kay » Thu, Jul 03, 2025, 5:45 PM UTC

adamschwartz wrote: post #85

I’m confused, but maybe two wrongs here do make a right. Please allow me to explain. Putting aside for the moment that I personally find Apple’s iOS 26 design objectionable[1], I don’t understand why `backdrop-filter: blur` is the focus of recent implementations jumping on the Liquid Glass hype train. Using background blur to create UI layer separation (often in combination with darkening/saturation or other contrast…

    - I’m not trying to recreate Liquid Glass (though happy to chat about it)
    - Goal: Production-usable → must at least work on current (desktop and mobile) versions of Chrome, Safari, and Firefox, on both Apple and PC/Android devices
    - Goal: Optimize the developer experience (more relevant to the glass SCSS library I’m working on) → ideally, people can add a class (plus an optional wrapper) and it just works in most tech stacks.