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
- Shape Presets: one tap for a card, pill, button or circle. Width and height go down to 60 x 40px
- Copy Code (SVG version): copies the SVG filter and CSS for the exact glass on screen, ready to paste into your own page
- Share Links: copy a link that opens the demo with your settings and background
- Saved Settings: sliders are remembered between visits. Defaults puts them back
- Background Picker: choose a preset image, paste an image URL, upload your own, or drop an image anywhere on the page
- Draggable Glass: drag the pane anywhere on screen. It can't be lost off the edge, and a double-tap centers it
- Responsive: side panel on desktop, bottom sheet on mobile that moves the glass out of the way while it's open
- Clone the repo and open
index.htmlin a browser, or visit the Live Demo. No build step. - Open the controls with the sliders button (top left on desktop, bottom right on mobile) and tweak every parameter in real time.
Esccloses the panel. - Pick a background from the thumbnail grid, paste an image URL, or upload your own.
- Drag the glass pane around to see refraction against different parts of the background. Double-tap it to re-center.
- Hit Copy code to take the effect into your own project, or Share link to send someone your exact setup.
- Hit Switch to WebGL at the bottom if you're not on Chromium. Other browsers also get a prompt on load.
| File | What it does |
|---|---|
index.html |
SVG feDisplacementMap version |
webgl.html |
Three.js shader version |
ui.js |
Shared panel, dragging, saved settings, share links and presets |
bg-picker.js |
Shared background picker (presets, URL, upload, drag and drop) |
index.css |
Shared styles |
backgrounds/ |
Background images, with small previews in backgrounds/thumbs/ |
| 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.
MIT © 2026 Archis Vaze. Free to use, modify and ship in personal or commercial projects. Just keep the copyright notice.
Background photos in backgrounds/ and the default Unsplash image are not covered by this license and remain under their original terms.