Frosted glass from games to the web

Original Article ↗ Hacker News Discussion ↗

Implementation details & techniques

  • Effect built primarily with CSS blur, shadows, light-ray textures, and a small TypeScript/JS helper for dragging panes and dynamic lighting.
  • Dragging uses data-* attributes to mark areas/items and positions absolutely within a positioned parent, handling mouse/touch, and clamping to bounds.
  • Several commenters note the blur only samples pixels under the element’s bounding box, causing unrealistic edges; suggested fixes include extending blur across the whole element plus CSS masks or clip-path, at the cost of extra markup and complexity.
  • Some report Safari/iOS quirks: user-select often needs -webkit- prefix; background-attachment: fixed still unreliable on iOS.
  • Alternatives proposed: SVG filters, pre-blurred background images (older CSS1-era “glass” demos), and adding subtle noise textures to improve visual grain.

Blur algorithm & correctness

  • Discussion on whether browsers approximate Gaussian blur using repeated box blurs vs true Gaussian kernels.
  • Multiple-pass box blur is known from game engines; exact browser implementations are reported as partially known and now described as uncertain.
  • Some argue the current behavior is “physically wrong” at edges; others accept the artistic trade-off.

Aesthetics, UX, and accessibility

  • Many praise the visual quality and smooth performance, noting it runs surprisingly well without spinning up fans.
  • Others criticize frosted glass as poor UX: variable contrast over dynamic backgrounds, distraction from moving content, difficulty meeting accessibility contrast guidelines.
  • Counterarguments emphasize emotional/visual appeal as part of UX, especially in games, OS shells, or where UI “is” the experience.
  • Suggested mitigations: darker tints, higher opacity (80–90%), outlines or text shadows, user preferences to disable blur, or restricting use to non-critical elements.

Performance, resource use & philosophy

  • Debate over “wastefulness”: GPU blur vs extra bandwidth for pre-blurred images vs overall page bloat from JS/trackers.
  • Some see client-side computation as cheaper than network; others prioritize being a “polite guest” on low-end devices.
  • Consensus: this specific demo is efficient enough, but heavy, everywhere-blur designs can cause real performance issues, especially on mobile.

Context & related work

  • Thread references game UIs (Forza, Minecraft, others) and engines that use HTML/CSS-like systems or custom renderers.
  • Multiple links to earlier glass/Aero-style experiments illustrate how similar effects predate modern backdrop-filter.