Apple's Liquid Glass look is all over iOS 26. Most web versions of it are fake though. They are just a blurry box with some transparency. This is the real thing: a translucent panel that actually bends the content behind it at its rim, with a faint prism fringe, while the inside stays perfectly readable. One file, zero dependencies, works on any element.
Real refraction runs in Chromium browsers (Chrome, Edge, Arc, Brave). Safari and Firefox get a premium frosted-blur fallback automatically, so it never looks broken.
Everything here is free and MIT licensed. Grab it, ship it, remix it.
Get the file
Repo (module + README + live demo): https://github.com/deepika-builds/liquid-glass
Drop it onto any element in three lines:
<script src="liquid-glass.js"></script>
<div class="glass">…your content…</div>
<script>
const glass = liquidGlass(document.querySelector(".glass"));
</script>
The module owns the optics (the SVG filter, the displacement map, resize handling, the fallback). You add a little CSS dressing, and that is what makes it read as real glass:
.glass {
border-radius: 28px;
background: linear-gradient(180deg,
rgba(14, 14, 22, 0.18), rgba(14, 14, 22, 0.32));
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.45),
inset 0 1px 1px rgba(255, 255, 255, 0.5),
inset 0 -8px 20px rgba(255, 255, 255, 0.06),
inset 0 0 0 1px rgba(255, 255, 255, 0.13);
}
Turn any component into glass with one command (the skill)
The part I actually love. I packaged this into a Claude Code skill so I never rebuild the effect by hand again. Point it at any component, a button, a card, a whole nav bar, say make it glass, and it applies the tuned module plus the dressing for you.
Install it as a user-level skill (available in every project):
mkdir -p ~/.claude/skills/liquid-glass
# drop the SKILL.md + liquid-glass.js from the repo into that folder
Then just ask Claude "make this card liquid glass" and it reuses the proven implementation instead of re-deriving it. The skill carries the tuned defaults and the hard-won gotchas so you skip the debugging I did not.
Dial it in
The defaults are tuned, but two knobs do most of the work:
- scale — displacement strength. Negative is a magnifying bulge. Around −60 is subtle, −112 is the default, −180 is dramatic.
- chroma — the prism fringe. Set 0 to turn the rainbow off, 10 to 20 to make it loud.
Raise blur a few px if the content behind the glass is busy or bright and the inside gets hard to read.
One gotcha that will save you a day
The SVG filter must set color-interpolation-filters="sRGB". Without it, filters default to linearRGB, which remaps the map's neutral gray and ghosts a copy of your whole background up and to the left. The module already sets this, but if you build your own, that is the one line that cost me most of a day.
Keep refraction at the rim, keep the interior neutral, and it stays legible. That is the whole trick.
Built by Deepika · @deepika.builds
