An interactive demo of an iOS 26–style Liquid Glass effect for the web.
Tweak inner shadows, tint, frost blur, noise distortion and swap out the background image—all live in your browser.
- Does not work on webkit/gecko - Only Chromium(blink) based browsers are supported. Please file issues if you spot any quirks or wish to improve or add more controls!
Try it out here → https://liquid-glass-eta.vercel.app/
- Inner Shadow — blur, spread & color
- Glass Tint — any RGB tint + opacity
- Frost Blur — control the backdrop-filter blur
- Noise Distortion — tweak SVG noise frequency & strength
- Background Image — paste your own URL for the page backdrop
- Responsive — desktop & mobile layouts
- Open
index.html. - Use the on-screen sliders and color pickers to adjust the effect.
Or simply visit the Live Demo link above.
Inspired by Apple’s upcoming iOS 26 Liquid Glass design.
Thanks to chakachuk’s CodePen demo for the original glass-distortion filter setup.
- Tested on: Chrome on macOS
- May not work in: Safari (backdrop-filter and SVG filter support varies)