Liquid Glass

Apple-style liquid glass material for any HTML element. One attribute. Zero dependencies.

Live demo · Webflow guide · npm

Why

Glassmorphism in CSS stops at backdrop-filter: blur. Real Apple-style glass needs refraction, chromatic aberration, specular highlights, and edge lighting — layered together. Liquid Glass ships all of that as one attribute you drop on any element, and it works inside Webflow CMS out of the box.

Quick start

CDN

<script src="https://cdn.jsdelivr.net/npm/@mo-community/liquid-glass@latest/dist/liquid-glass.min.js"></script>
<div data-liquid-glass>Hello, glass.</div>

npm

pnpm add @mo-community/liquid-glass

Webflow

See Use in Webflow below.

Presets

| Preset | Vibe | | ------------- | ---------------------------- | | frost | Apple Control Center | | lens | Magnifier / refraction-heavy | | holographic | Iridescent edge | | liquid | Soft fluid blob |

Attributes

| Attribute | Type | Default | Description | | -------------------- | ------- | ------- | ------------------------------------------------ | | data-liquid-glass | flag | — | Marks an element as liquid glass. | | data-lg-preset | string | frost | One of frost, lens, holographic, liquid. | | data-lg-blur | number | preset | Backdrop blur in px. | | data-lg-distortion | number | preset | Refraction strength. | | data-lg-saturation | number | preset | Saturation %. | | data-lg-tint | string | preset | e.g. white/8 (color/alpha%). | | data-lg-chromatic | number | preset | Chromatic aberration amount. | | data-lg-specular | boolean | true | Toggle pointer-tracking highlight. |

Use in Webflow

1. Paste the CDN script tag into your project's footer custom code.
2. Add the custom attribute data-liquid-glass to any element in the Designer.
3. Publish. Done.

Programmatic API

window.LiquidGlass.apply(element, { preset: "lens", blur: 18 });
window.LiquidGlass.remove(element);
window.LiquidGlass.refresh();
window.LiquidGlass.config({ autoBoot: false });

Browser support

| Browser | Glass | Refraction | Specular | | ----------- | ----- | ---------- | -------- | | Chrome 90+ | ✅ | ✅ | ✅ | | Edge 90+ | ✅ | ✅ | ✅ | | Safari 14+ | ✅ | ⚠️ partial | ✅ | | Firefox 88+ | ✅ | — | ✅ |

Roadmap

• [ ] React wrapper (@liquid-glass/react)
• [ ] Vue wrapper
• [ ] More presets via PRs welcome

Contributing

PRs welcome. Run pnpm install && pnpm test && pnpm build before opening one.

License

MIT © Mohamed Azzam

Linkedin: https://www.linkedin.com/in/mo-azzam/