Liquid glass generator

Drag the glass across the scene and watch its edges bend what’s behind it. Copy CSS that already handles dark mode and accessibility settings.

bend the light · bend the light · bend the lightbend the light · bend the light · bend the lightbend the light · bend the light · bend the lightbend the light · bend the light · bend the lightbend the light · bend the light · bend the lightbend the light · bend the light · bend the lightbend the light · bend the light · bend the lightbend the light · bend the light · bend the lightbend the light · bend the light · bend the light

Lisbon, May34 photos, shared with 3 people

Continue

ColourTypeStripesYour image

Your image stays in your browser. Nothing is uploaded.

Your code

All six presets in one folder

Clear, Frosted, Bubble, Tinted, Smoke and Ice as ready classes, with the refraction script and an example page. It’s free: checkout asks for your email and sends the download link there.

Download opens soon.

liquid-glass.css: All six presets, one class each, with dark mode and fallbacks
liquid-glass.js: The edge refraction script
index.html: Every preset over a busy backdrop
README.md: Classes, attributes, browser support
LICENSE.md: Use it in any project
package.json: Vite setup: npm install, then npm run dev
vite.config.js: Opens the example in your browser

What the CSS already handles

Dark mode: A darker fill and dimmer rims, so the glass doesn’t turn to plastic at night.
Reduce transparency: A solid fill in the same colour for people who switch translucency off.
Older browsers: The same solid fill where backdrop-filter isn’t supported.
High contrast: A real border in Windows forced-colours mode.
Edge refraction: Added by a small script in Chromium browsers. Without it, the glass stays frosted.

Made of the same glass

Components from the store that move as well as they look: springs, drag, keyboard, both themes. Plain HTML, CSS and JavaScript.

index.html

<!-- aria-checked is the
     only state: CSS reads
     it, JS writes it -->
<button class="dew"
  type="button"
  aria-labelledby="l-wifi"
  aria-checked="true">
<!-- role="switch" is added
     by the script -->
  <span class="dew-knob">
  </span></button>

dew.css

/* typed, so it can
   transition: one number
   moves knob and colour */
@property --dew-p {
  syntax: "<number>"; …
.dew { …
  transition: --dew-p
    420ms var(--dew-spring);
…
.dew[aria-checked="true"]
  { --dew-p: 1; }

dew.js

// drag writes the number
// in; CSS springs the rest
const p = Math.max(0,
  Math.min(1, drag.p0 +
  dx / travel()));
root.style.setProperty(
  '--dew-p', p.toFixed(3));
// released past halfway
// wins; a tap just flips
set(moved ? p > 0.5
  : !isOn());

Dew

A switch whose knob turns into a drop of glass while you hold it

2.1 KB0 depsToggles

index.html

<!-- no pill in the markup:
     the script adds it
     behind the options -->
<div class="pinch"
  aria-label="View">
  <button
    class="pinch-option" …
    data-value="day"
    aria-checked="true">
<!-- radio roles, roving
     tabindex: from JS -->

pinch.css

/* isolate: z-index -1 puts
   the pill under the labels
   but above the glass */
.pinch { …
  isolation: isolate; …
.pinch-pill { …
  left: 0; …
  z-index: -1;
  /* set by JS per frame */
  will-change: transform,
    width;

pinch.js

// the edge in front gets
// the stiff spring, so the
// pill stretches, then the
// back edge catches up
const lead = movingRight
  ? R : L, trail = …
for (const [s, p] of …) {
  const a = -p.k * (s.x -
    s.target) - p.c * s.v;
  s.v += a * dt;
  s.x += s.v * dt;

Pinch

A glass segmented control whose pill stretches like a drop of water

3.2 KB0 depsNavigation

index.html

<nav class="loupe" aria-label="Sections">
  <div class="loupe-bar">
    <div class="loupe-tabs" role="tablist">
      <button class="loupe-tab" type="button" role="tab" aria-selected="true" data-value="today">
        <svg class="loupe-icon" viewBox="0 0 24 24" aria-hidden="true"><rect class="loupe-shape" x="3" y="5" width="18" height="16" rx="4"/><path class="loupe-line" d="M3 10h18"/><path d="M8 3.5v3M16 3.5v3"/><circle class="loupe-dot" cx="12" cy="15.5" r="1.4"/></svg>
        <span class="loupe-label">Today</span>
      </button>
      <button class="loupe-tab" type="button" role="tab" aria-selected="false" data-value="inbox">
        <svg class="loupe-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="loupe-shape" d="M6.2 4.5h11.6a2 2 0 0 1 1.9 1.4L22 13v4.5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V13l2.3-7.1a2 2 0 0 1 1.9-1.4z"/><path class="loupe-line" d="M2 13h5l1.5 2.5h7L17 13h5"/></svg>
        <span class="loupe-label">Inbox</span>
      </button>

loupe.css

.loupe-tab {
  position: relative;
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  height: var(--loupe-h);
  min-width: var(--loupe-tab-w);
  border-radius: 999px;
  display: grid;

loupe.js

export function init(root, { onChange, onPreview, magnify, drag = true } = {}) {
  const tabs = root.querySelector('.loupe-tabs');
  const items = [...tabs.querySelectorAll('.loupe-tab')];
  const icons = items.map(t => t.querySelector('.loupe-icon'));
  const scale = magnify ?? (parseFloat(getComputedStyle(root).getPropertyValue('--loupe-magnify')) || 1.6);
  const valueOf = i => items[i].dataset.value ?? items[i].textContent.trim();

  // build the lens: caustic + lift shadow (under), dome (glass) › view (magnified copy) + sweep (finale glint)
  const el = (cls) => { const s = document.createElement('span'); s.className = cls; return s; };
  const lens = el('loupe-lens');
  lens.setAttribute('aria-hidden', 'true');

Loupe

A glass tab bar where a lens slides over the active tab and magnifies what's under it

7.8 KB0 depsNavigation

index.html

<nav class="siphon" aria-label="Main">
  <div class="siphon-bar">
    <div class="siphon-links">
      <a class="siphon-link" href="#home" data-value="home" aria-current="page">
        <svg class="siphon-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="siphon-shape" d="M4 10.4 12 4l8 6.4v8.6a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 19z"/><path class="siphon-cut" d="M10 20.4v-4.9h4v4.9"/></svg>
        <span class="siphon-label">Home</span>
      </a>
      <a class="siphon-link" href="#work" data-value="work">
        <svg class="siphon-icon" viewBox="0 0 24 24" aria-hidden="true"><rect class="siphon-shape" x="4" y="4" width="7" height="7" rx="2"/><rect class="siphon-shape" x="13" y="4" width="7" height="7" rx="2"/><rect class="siphon-shape" x="4" y="13" width="7" height="7" rx="2"/><rect class="siphon-shape" x="13" y="13" width="7" height="7" rx="3.5"/></svg>
        <span class="siphon-label">Work</span>
      </a>

siphon.css

.siphon-dye {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--siphon-h);
  padding: 0 17px 0 15px;
  border-radius: 999px;
  color: var(--siphon-muted);
  font-size: .875rem;

siphon.js

export function init(root, { onChange, onTheme, theme = true, themeTarget = document.documentElement } = {}) {
  const row = root.querySelector('.siphon-links');
  const links = [...row.querySelectorAll('.siphon-link')];
  const themeBtn = theme ? root.querySelector('.siphon-theme') : null;
  const valueOf = i => links[i].dataset.value ?? links[i].textContent.trim();
  const id = `siphon-${++uid}`;

  // ---- build: pour layer = liquid svg + an ink copy of the links clipped to the liquid ----
  const pour = document.createElement('span');
  pour.className = 'siphon-pour';
  pour.setAttribute('aria-hidden', 'true');

Siphon

A glass navigation bar whose highlight pours from link to link like honey

9.2 KB0 depsNavigation

Questions

Is it free to use in client work?

Yes. Copy the CSS and the script into any project, commercial or not. No sign-up and no credit required.

Which browsers bend the edges?

Chrome, Edge, Opera and other Chromium browsers. Safari and Firefox don’t apply SVG filters to backdrop-filter, so they show the same glass frosted, without the bend. The CSS needs no changes for that: liquid-glass.js only adds the refraction where it works.

What happens when someone turns on Reduce transparency?

The glass turns into a solid surface in the same colour, in both themes. Browsers without backdrop-filter get the same solid fill, and Windows high contrast mode gets a real border.

How does the refraction work?

The script draws a displacement map for the element’s exact size and corner radius: flat in the middle, steep across the edge. An SVG feDisplacementMap uses it to shift the backdrop, and a resize observer redraws it when the element changes size. Colour split runs the shift three times, once per colour.

Does it slow the page down?

Every blurred surface costs the browser a pass over what is behind it. Use refraction on one or two hero elements, like a tab bar or a dock, and plain frosted glass for the rest.

Liquid glass generator

Your code

All six presets in one folder

What the CSS already handles

Made of the same glass

Dew

Pinch

Loupe

Siphon

Questions

Your cart

Saved for later