Made by soundzerowing
GET STARTED
Wrap a section. Mark the glass.
Put your content inside <liquid-glass> and add glass to anything that should be glass. Your HTML and CSS keep doing the layout; the glass follows every element's size, position and border-radius, live.
<script type="module" src="https://cdn.jsdelivr.net/gh/MuhammadaliMS/liquid-glass@1/dist/liquid-glass.js"></script>
<liquid-glass backdrop="hero.jpg" dim=".25" style="height: 100vh">
<nav glass class="navbar">…</nav>
<h1>Your headline</h1>
<a glass href="/signup" class="button">Get started</a>
</liquid-glass>Leave the glass elements' own background transparent; give them padding and a border-radius like any button or card.
WHERE IT GOES
The parts of a site that float.
Navigation
A floating nav bar that stays readable over any hero image, with a search field and an avatar on the same glass.
Buttons & controls
Primary and secondary buttons, icon buttons, a switch and a segmented control. Tint any of them with --glass-tint; they swell when pressed.
Cards & players
Notifications, toasts, widgets and media players that sit over photos or video without hiding them.
✦
Your table is readyKōji · 2 people · 8:30 pm
Tab bars & toolbars
The app-style bar at the bottom of a mobile site, with a glass action button beside it.
A lens you can drag
Add glass-drag and it follows the pointer, stretching as it moves. Turn up --glass-depth and --glass-dome for a magnifier.
drag
API
Attributes and CSS.
OnNameWhat it does
<liquid-glass>
backdropaurora (default, animated), or the URL of an image or video (.mp4, .webm). Images on another domain need CORS headers.<liquid-glass>
dimDarken the backdrop (0 to 0.9) so text over it stays readable, like a scrim on a hero photo.<liquid-glass>
inner-lightThe glass glows in six colours on its own, as if sound were playing.<liquid-glass>
colorsUp to four colours for the aurora, e.g. "#ff5a1f #ff2d8a #6a3bff #00c2ff".any element inside
glassRender this element as glass. Up to 16 per scene; later ones sit on top of earlier ones.any element inside
glass-dragLet the visitor drag it around.CSS
--glass-tintA colour mixed into the glass; its alpha is the strength. rgba(40,110,255,.5) makes a blue button.CSS
--glass-depthHow thick the glass is, as a multiple of its natural thickness. Default 1; 2 for a heavy lens.CSS
--glass-domeHow much the face crowns outward. Default 1; higher magnifies more.CSS
--glass-iorIndex of refraction. Default 1.38; glass is about 1.5, water 1.33.CSS
--glass-frost0 (clear, default) to 1 (frosted).CSS
--glass-pullHow far the edge bulges toward the pointer, in px. 0 turns it off.CSS
--glass-lensA raised disc on the face, "x y radius" in px from the centre, like the recorder's stop button.CSS
--glass-glowHow much sound lights it from inside, 0 to 2. Default 1.CSS
--glass-pressHow much it grows when pressed. Default 1.045; 1 turns it off.CSS
--glass-shadow Drop shadow strength, 0 to 1.CSS
--glass-chromaColour split through the glass. Default 0.008.FRAMEWORKS
Works where HTML works.
It's a standard custom element, so React, Vue, Svelte, Astro and plain HTML all use it the same way.
npm install github:MuhammadaliMS/liquid-glass
// once, anywhere in your app
import '@zerowing/liquid-glass';
// React
<liquid-glass backdrop="/hero.jpg" style={{ height: '80vh' }}>
<button glass="" className="cta">Get started</button>
</liquid-glass>GOOD TO KNOW
- The glass bends its scene's backdrop. Browsers don't let WebGL read the page itself, so each
<liquid-glass>draws its own backdrop (the aurora, your photo or your video) and the glass refracts that. Put it behind your hero, header or any section with a strong image. - Your content stays real HTML. Links, buttons, inputs and text inside glass elements are ordinary, accessible and selectable. Only the glass is drawn.
- It's light on the page. One WebGL canvas per scene, idle when nothing moves, paused off-screen. Without WebGL the glass falls back to frosted CSS.
- MIT licensed. Use it in anything, commercial work included.