LiquidGlass: WebGL-powered Liquid Glass Effects

LiquidGlass: a JavaScript library that applies realistic liquid glass refraction, blur, chromatic aberration, and Fresnel lighting to any HTML element using WebGL shaders.

Key features:

• Fragment shader-based glass refraction and specular highlights
• Per-panel Gaussian blur and chromatic aberration
• Layered compositing so glass panels see each other in refraction
• Draggable floating panels via Pointer Events
• Static DOM capture cached once; dynamic content flagged per-element
• Works with live video, canvas elements, and animated content

Zero CSS tricks. The effect runs entirely in WebGL. Worth checking out for anyone building UI components with a physical glass aesthetic.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo