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

Here are the key themes from the Hacker News discussion:

Complexity and "Layered Tricks" in Web Graphics

The discussion highlights the intricate nature of implementing modern web design effects, often requiring multiple CSS techniques rather than a single "trick." Users expressed surprise at the number of methods needed to achieve desired visual outcomes, especially when aiming for cross-browser compatibility.

• "It's always surprising to me how often computer graphics isn't 'one weird trick' and more like '5 layered tricks.'" (mbforbes)
• "Yes, same! I didn't expect it to need so many tricks to implement." (kris-kay)
• "And sometimes it's 5 layered tricks just to 'center' something." (whycome)

Performance Implications of Backdrop Filters

A recurring concern is the resource intensity of certain visual effects, particularly the backdrop-filter property and its blur component. Users are keen to understand which parts of the implementation are most taxing on system resources.

• "Do you have a sense of which aspects are the most resource-intensive? Naively I would guess it's the backdrop-filter." (mbforbes)
• "Your intuition is correct, the most resource-intensive part is the blur bit of the backdrop-filter. The higher the blur value, the more neighbouring pixels need to be 'consulted' before rendering." (kris-kay)
• "Another resource-intensive aspect is continuous repaint as you scroll or as a video background changes the look of the glass." (kris-kay)
• "Firefox on Android often lags for me with backdrop blur effects" (pfg_)

The Elusive "Liquid Glass" Effect and its Nuances

A significant portion of the conversation revolves around Apple's "Liquid Glass" effect and its perceived strengths, particularly the refractive and distortive qualities that contribute to visual layer separation. Users debated whether the current web implementations capture these essential aspects, with many concluding that true replication is challenging due to limitations in browser technology.

• "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." (jauntywundrkind)
• "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." (jauntywundrkind)
• "And that key refractive element, that takes such huge advantage of human's motion sensing, is missing here." (jauntywundrkind)
• "This is a slight tangent, but 20 years ago I had a nightmare in which I got hit by a tram, died and travelled in time into a world where every computer was running Windows Vista. In other words, fair enough, you might be onto something here after all." (rpastuszak, humorously referencing the perceived lack of advancement in some UI effects)
• "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." (altairprime)
• "I agree that Liquid Glass's edge distortion looks great, and I will try my hand at recreating it eventually." (kris-kay)
• "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." (kris-kay)
• "Nice! Now we can bring the awfulness of apple liquid glass to the web" (voidUpdate)

Challenges with Web Technologies and the "Moat" Argument

Several users discussed the inherent limitations of current web technologies, particularly compared to native application development, in replicating sophisticated visual effects like Liquid Glass. This led to a discussion about Apple potentially creating a "moat" to incentivize native development over web-based solutions.

• "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." (jasonthorsness)
• "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." (_benton)
• "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." (cyral)
• "Pro tip: Apple adds fancy GPU effects because Android can't rely on good GPUs, so Apple can continually define premium. Thus, the odds you're doing glass-morphism via a Gaussian blur and drop shadow in CSS, are exactly 0. They are assuredly at abstraction levels far below that." (refulgentis)

The Nature of Beauty, User Perception, and Prior Visual Effects

The conversation touched upon whether users can perceive, or even care about, the subtle differences in these advanced visual effects. Some users argued that the perceived value might be exaggerated, while others defended the pursuit of high-fidelity replication, drawing parallels to historical UI design trends.

• "I think you overestimate how much most users are able to detect such differences and will care about it." (silvestrov)
• "Somewhat like the blind tasting tests of Coca Cola versus Pepsi versus supermarket brands." (silvestrov)
• "elpocko: Is this considered new design? What is special about it? I don't see much of a difference compared to the Aero glass effect in Windows Vista from 2006. I've also seen it on many websites, using backdrop-filter: blur. Or am I missing something?"
• "rpastuszak: You’re not looking far back enough:) I see it more as a new Aqua from OSX Cheetah (2000 CE)"
• "kris-kay: You're right, glassmorphism dates back to the early years of this millennium. For instance, Project Looking Glass(2003) attempted an entire desktop environment that resembled slabs of glass that could be turned over in 3D space!"
• "adamscholes: Using background blur to create UI layer separation (often in combination with darkening/saturation or other contrast enhancements) has been around for over a decade on iOS and almost as long on the web. So what’s new here?"

The Role of Textures and Physical Material Properties

The importance of textures and how they interact with light and bevels was discussed as a key differentiator in creating realistic glass effects. Users noted that simply applying a blur isn't sufficient and that simulating light interaction with an object's surface is crucial.

• "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." (kris-kay, responding to a comment about web views)
• "magic_hamster: It's a nice effect, but to me this doesn't really feel like glass. I think the most immediate difference is how light has no interaction with the bevels. I also expect some light to shine back into the glass and affect the lighting and coloring. It's not enough to just throw a blur in there."
• "suralind: It looks so much better with some texture!" (kris-kay: "I agree, even a very subtle texture makes a big difference!")
• "kris-kay: For the current project, I aimed to create a material that looked polished, worked consistently across browsers, and didn't use real 3D."
• "dotancohen: 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."