liquid-glass: an iOS 26 style glass effect for the web, twice

A demo page, not a component library

The repository is described as an interactive demo of an iOS 26 style Liquid Glass effect for the web, and the README says so without dressing it up. There is a live demo at liquid-glass-eta.vercel.app, and the primary language is recorded as HTML.

What is in the repository makes the shape clear. There is index.html and webgl.html, the two implementations. There is ui.js for the shared panel, dragging, saved settings, share links and presets, bg-picker.js for the shared background picker, index.css for the shared styles, and a backgrounds directory holding the background images with small previews in backgrounds/thumbs. There are also favicon files, an apple-touch-icon.png, a robots.txt and a sitemap.xml, which is the small administrative debris of something deployed as a static site.

There is no package.json, no build step and no dependency manifest in the file listing. The usage section confirms it: clone the repo and open index.html in a browser, or visit the live demo, no build step.

So the correct way to think about this is as a reference implementation and a tuning tool rather than as a library. You open it, move the sliders until the glass looks the way you want, and then you take the generated code. The README is explicit that the SVG version has a Copy Code feature which copies the SVG filter and CSS for the exact glass on screen, ready to paste into your own page.

That is a genuinely useful shape for a design effect that has no stable standard yet. A component library would tell you how to use it. This tells you what the parameters produce.

The inspiration is stated plainly as Apple's iOS 26 Liquid Glass design language, and the original glass distortion filter setup came from chakachuk's CodePen demo, which the README credits as the thing that kicked the project off.

Two engines and the browser support that follows

The repository's central design decision is that the same effect is implemented twice, because no single browser API covers it.

The SVG version uses feDisplacementMap with backdrop-filter, and the WebGL version uses a Three.js full-screen shader. The table in the README contrasts them directly. The SVG version's refraction is a physics-based displacement map with a configurable index of refraction, and the WebGL version's is real-time GLSL ray refraction.

The cost of that choice is browser support, and the README is blunt about it. The SVG version is Chrome and Chromium only. The WebGL version runs in all modern browsers. The browser support table makes it explicit: Chrome, Edge and Chromium get both, while Firefox and Safari get the WebGL version only.

There is a button at the bottom of the page to switch between them, and other browsers also get a prompt on load. So a Firefox or Safari visitor does not get a broken page, they get a different implementation of the same visual idea.

The controls differ too, and the difference is instructive. The SVG version exposes glass shape, refraction, appearance, inner and outer shadow, and tint. The WebGL version adds blur and specular to that list. The extra controls exist because a shader gives you direct control over the light transport, while a displacement map gives you control over a distortion texture, and specular highlights are a property of the former rather than the latter.

The practical consequence is that the two engines are not drop-in equivalents. If you copy the code from the SVG version, you are shipping something that only works in Chromium. If you copy from the WebGL version, you are shipping a Three.js dependency. The README's own guidance is to hit Switch to WebGL if you are not on Chromium, and that hint is about as clear as documentation gets for a demo.

The parameters that define the effect

The feature list is a list of sliders, and reading it tells you what the effect actually is made of.

The refraction is physics based, with configurable glass thickness, bezel width, and index of refraction. The index of refraction is the interesting one, because it is a physical property of the substance rather than a visual knob, which is why the same value looks different against different backgrounds.

Then there are the surface treatments. Specular highlights have adjustable opacity and saturation for what the README calls realistic light reflections. Inner and outer shadow have color, blur and spread controls. Glass tint accepts any RGB tint with an opacity control.

The shape presets turn the pane into a card, a pill, a button or a circle in one tap, and the size can go down to 60 by 40 pixels, which tells you the effect is intended to work at small sizes and not only as a large modal sheet.

The features that are about the demo rather than the effect are worth separating out. The background picker lets you choose a preset image, paste an image URL, upload your own, or drop an image anywhere on the page, which is what makes the refraction legible, since a flat background hides the whole point. The glass pane itself is draggable, and the README notes that it cannot be lost off the edge and that a double tap centers it, which is the kind of small touch that makes a demo pleasant to actually play with. Saved settings persist between visits with a Defaults button to reset, and share links copy a link that opens the demo with your settings and background.

There is also a responsive story. The layout is a side panel on desktop and a bottom sheet on mobile, and on mobile that sheet moves the glass out of the way while it is open. The Esc key closes the panel.

All of that is documented in the usage section as six numbered steps, from cloning the repo to hitting Copy code or Share link.

What the code and the licence actually cover

The licence section is unusually precise and worth reading in full, because it contains the one caveat that will bite you if you skip it.

The project is MIT licensed, copyright 2026 Archis Vaze, and the README states it plainly: free to use, modify and ship in personal or commercial projects, just keep the copyright notice.

Then the exception. Background photos in the backgrounds directory and the default Unsplash image are not covered by this licence and remain under their original terms. That is a distinction that is easy to miss and expensive to get wrong. The effect code is yours to ship, but the picture of the mountains behind the glass is not. If you take the demo into a product, you need your own background, either one you license or one you make.

The file listing supports the same picture. The backgrounds directory is the only place with binary assets beyond the icons, and the fact that thumbs sits inside it means the project ships both full size images and previews for the picker grid.

The implementation split is visible in the two HTML files. index.html is the SVG feDisplacementMap version and webgl.html is the Three.js shader version, and the two JavaScript files and the stylesheet are shared between them. The project structure table in the README lays this out, one row per file with what it does, and the browser support table and the two engine columns follow the same pattern of stating limitations rather than glossing them.

The webgl.html file is not described beyond its name and the shared module split, so how the shader is written, what geometry it uses and how the displacement texture is generated are all things you would read in the source rather than in the documentation.

Where this is the wrong tool

The first limit is that this is not a component. There is no import, no package, no themeable API surface. The deliverable is a CSS filter and a set of styles that you copy out of a demo page. If your design system needs a glass panel in thirty places, you are going to hand-maintain thirty copies of a filter definition, and the tuning you did interactively is going to be re-done by hand for each variation unless you turn the values into custom properties yourself.

The second limit is the browser split, and it is sharper than a normal progressive enhancement case. The SVG version is not a degraded fallback that approximates the effect, it is unavailable in Firefox and Safari, which means the copy code path from that version is a Chromium-only deliverable. If you need one visual result across all browsers, the WebGL version is the only starting point, and it means shipping Three.js to users who may have no other reason to have it.

The third is that the effect is expensive in a way the demo does not show. A full-screen Three.js shader with real-time ray refraction and a backdrop-filter displacement over arbitrary content is not free on a laptop, and the demo shows one pane over one background at a time. The README does not describe performance characteristics, frame rates or which browsers throttle the effect, so if you are planning to put this over a scrolling list, the cost is yours to measure.

The fourth is a licensing point that people get wrong: the MIT licence covers the effect, and the photographs do not have that status. Ship it with your own imagery.

The alternatives differ in what they cost you. Building the effect by hand in CSS means writing the displacement map and the filter chain yourself, which is what the demo exists to spare you, and it is still Chromium only. A WebGL implementation of your own gives you the same reach as the shader version without the demo's structure, at the cost of writing the shader. And the platform-native route, using the backdrop-filter and other primitives directly with no refraction simulation, is cheaper to run and gives up the specific optical look, which is the whole point of the demo.

Working through the demo in the right order

A practical path through the project, following the usage steps.

Open it first. The live demo at liquid-glass-eta.vercel.app is the fastest route, and opening index.html from a clone works the same way since there is no build step.

Then set the background before you touch the glass. The refraction is only legible against something with structure, and the picker gives you a thumbnail grid, a URL field, an upload and a drop target. A flat colour will make the whole effect look broken when it is actually working.

After that, open the controls and work the parameters in a sensible order. Shape and size first, since a bezel width that suits a 600 pixel card is wrong on a 60 by 40 button. Then the index of refraction, and the glass thickness, which is what gives the sense of depth. Then the shadows and the specular highlights, which are the difference between a shape with a blur and a piece of glass.

Drag the pane across the background as you go, and double tap it to recenter. That movement is how you find out whether the refraction reads correctly over the content you actually have.

When it looks right, hit Copy code, and the SVG filter and the CSS for the current settings go to your clipboard. If you are on Firefox or Safari you will have been prompted to switch to the WebGL version, and the code you take from that path assumes a shader rather than a filter.

For handing the exact setup to someone else, Share link copies a link that opens the demo with your settings and background, which is worth more than a screenshot when the point is to argue about a specific refraction value.

Editorial conclusion

Adopt the copy code button from liquid-glass if you need a liquid glass panel for a web project and want to see the filter and CSS before committing to an approach, and prefer the WebGL version unless your users are all on Chromium. Do not treat the repository as a component library, since it is a single demo page with a control panel rather than something you import. Verify first which of the two engines you need for your browser matrix, that the copied CSS and SVG filter from the SVG version will only behave in Chromium, and that you have a licensed image for any background you use in your own product.

Frequently asked questions

Official sources

1. archisvaze/liquid-glass on GitHub
2. Issues
3. License: MIT
4. Project website
5. README