Liquid Glass for the web: real refraction with WebGL
TL;DR
Pure-CSS glassmorphism just blurs the background and looks flat. Liquid Glass libraries use WebGL shaders to simulate refraction and blur in real time, and apply to cards, circles and pills without writing shaders yourself.
How it differs from pure CSS
| CSS backdrop-filter | Liquid Glass (WebGL) | |
|---|---|---|
| Effect | Blurs the background, no distortion | Refraction + blur; the background bends like real glass |
| Shapes | Follows border-radius | Cards, circles, pills… with custom masks |
| Cost | Very light | More GPU work |
| Complexity | A few lines of CSS | A few lines of JS; the library handles shaders |
How to put it to work
- Use sparingly: for hero elements (nav bar, featured card), not the whole page.
- Fallback: keep a
backdrop-filterversion for low-end devices or browsers without WebGL. - Contrast: text on glass easily loses contrast — check for at least 4.5:1.
References: liquid-glass-js (npm) · liquidGL (GitHub)