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

Original Article ↗ Hacker News Discussion ↗

Implementation & Performance

  • Commenters note the effect relies on “many layered tricks,” not one simple CSS rule.
  • The blur component of backdrop-filter is identified as the most resource-intensive, especially at high radii and with constantly changing backdrops (scrolling, video).
  • Some users report jank/slow scrolling on mobile (especially Firefox on Android), others say it’s smooth on powerful Apple hardware, highlighting hardware variability.

Visual / Physical Accuracy Debate

  • Several comments dive into how realistic the blur is relative to real glass:
    • Standard backdrop blur only samples pixels directly behind the element’s bounds, missing contributions from nearby content; some call this a spec- or implementation-limited approximation.
    • SVG-mask-based workarounds can extend the blur kernel beyond bounds, but then may misrepresent how light interacts with non-emissive objects.
  • There is disagreement on whether the “tweaked” version is more correct or just visually distracting and depth-confusing.

Relation to Apple Liquid Glass & Platform Moat

  • Many frame this as adjacent to, but distinct from, Apple’s Liquid Glass:
    • This tool intentionally does not attempt full refraction/edge distortion.
    • Commenters argue Apple picked an effect that’s easy to imitate poorly but hard to reproduce faithfully, especially on web/cross-platform stacks.
    • Some think the moat is as much GPU/OS optimization and power efficiency as pure aesthetics.

Design Value & UX Concerns

  • Some love the look, especially with subtle texture and bevels; others find the glass/refraction trend distracting or skeuomorphic.
  • Concerns are raised that highly transparent, refractive layers can harm contrast and readability if overused; blur remains better for relaxing the eye.

Browser & Platform Constraints

  • Advanced SVG-filter-based “real glass” demos exist, but often fail on Firefox and sometimes Safari, reinforcing cross-browser limits.
  • Webview apps on iOS are reported capped at 60fps, making heavy effects feel worse than native.

Tool UX and Practical Considerations

  • Discussion of trade-offs between a polished ~40+ line CSS stack vs a simple filter: blur() line.
  • Some feedback about mobile layout (generator overlays the effect) and shadow behavior.
  • Texture assets are free to use but should be self-hosted in production.

Related Projects & Alternatives

  • Multiple links to other glassmorphism generators, SVG-filter demos, and a JS-based “real refraction” glass prototype are shared.
  • Houdini is mentioned as a longer-term path to richer GPU-style effects in CSS.