An interactive demo of an iOS 26–style Liquid Glass effect for the web.
Try it out → liquid-glass-eta.vercel.app
SVG Version (index.html) |
WebGL Version (webgl.html) |
|
|---|---|---|
| How it works | SVG feDisplacementMap + backdrop-filter |
Three.js full-screen shader |
| Refraction | Physics-based displacement map with configurable IOR | Real-time GLSL ray refraction |
| Browser support | Chrome / Chromium only | All modern browsers |
| Controls | Glass shape, refraction, appearance, inner/outer shadow, tint | Glass shape, refraction, blur, specular, tint, shadow |
- Physics-Based Refraction — configurable glass thickness, bezel width, and index of refraction (IOR)
- Specular Highlights — adjustable opacity and saturation for realistic light reflections
- Inner & Outer Shadow — color, blur, and spread controls
- Glass Tint — any RGB tint with opacity control
- Background Picker — choose from preset template images or paste a custom URL
- Draggable Glass — click and drag the glass pane anywhere on screen
- Responsive — desktop and mobile layouts
- Clone the repo and open
index.htmlin a browser, or visit the Live Demo. - Use the control panel on the left to tweak every parameter in real time.
- Pick a background from the thumbnail grid or paste your own image URL.
- Drag the glass pane around to see refraction against different parts of the background.
- Hit Switch to WebGL version at the bottom if you're not on Chromium.
| Browser | SVG Version | WebGL Version |
|---|---|---|
| Chrome / Edge / Chromium | ✅ | ✅ |
| Firefox | ❌ | ✅ |
| Safari | ❌ | ✅ |
Inspired by Apple's iOS 26 Liquid Glass design language. Thanks to chakachuk's CodePen demo for the original glass-distortion filter setup that kicked this off.