liquid-glass

Liquid glass

A real lens: the backdrop refracts at the rounded rim and stays sharp in the middle, with a specular edge — not just a blur.

Full lens in Chromium browsers (SVG filters in backdrop-filter). Safari and Firefox get the frosted fallback automatically.

Use it for

One hero-level floating element: nav bar, a single CTA pill, a media control
Over rich, colorful or photographic content that is worth bending

Don't — this is how it turns into slop

Every card on the page — glass everywhere is exactly the template look
Over flat single-color backgrounds (nothing to refract, it just looks grey)
Long-form text containers — refraction hurts reading

Accessibility

Honors prefers-reduced-transparency with an opaque surface
Keep text on glass at 4.5:1 contrast against the darkest backdrop it can sit on

Performance

The displacement map is computed once per size change; keep glass elements few and small
Avoid animating width/height of a glass element — each resize rebuilds the map

The code

/* Liquid glass — a lens, not a blur.
   The backdrop bends at the rounded rim (SVG displacement, Chromium),
   stays sharp in the middle, and gets a specular edge.
   Everywhere else it falls back to honest frosted glass. */
.liquid-glass {
  --lg-radius: 28px;
  --lg-tint: rgb(255 255 255 / 0.08);
  position: relative;
  isolation: isolate;
  border-radius: var(--lg-radius);
  background: var(--lg-tint);
  /* Rim light: bright top edge, faint bottom edge, soft outer drop. */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    inset 0 -1px 0 rgb(255 255 255 / 0.12),
    inset 0 0 0 1px rgb(255 255 255 / 0.18),
    0 12px 32px -12px rgb(0 0 0 / 0.35);
}

/* Specular sheen across the top third — sells the "curved surface". */
.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.22) 0%,
    rgb(255 255 255 / 0.04) 38%,
    transparent 60%
  );
  z-index: -1;
}

/* Browsers without SVG backdrop filters (Safari, Firefox): frosted. */
.liquid-glass.lg--fallback {
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  background: rgb(255 255 255 / 0.16);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-glass.lg--fallback {
    background: rgb(30 30 40 / 0.82);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .liquid-glass,
  .liquid-glass.lg--fallback {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgb(30 30 40 / 0.92);
  }
}

Which of these fit your site?

Scan your URL for free. The full review picks recipes for each section and hands your AI a complete design kit.

Check my site ↑