Liquid Glass CSS for the Web

Everything behind the iOS 26 liquid glass look, explained and ready to copy: refraction, frost, rim light, press bloom and graceful fallbacks.

Open the Studio Browse components

The ingredients

Backdrop blur with backdrop-filter: blur() for frost.
Refraction with an SVG feDisplacementMap bending the backdrop at the rim.
Dispersion by splitting red, green and blue channels slightly.
Rim light and specular highlight using inset shadows and gradients.

Starter CSS

.liquid-glass {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px) saturate(1.5);
  -webkit-backdrop-filter: blur(8px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5),
              0 12px 40px rgba(0,0,0,.25);
  border-radius: 28px;
}
@supports (backdrop-filter: url(#lg)) {
  .liquid-glass { backdrop-filter: url(#lg) blur(4px) saturate(1.5); }
}

Fallbacks and accessibility

Keep a blur fallback for Safari and Firefox, keep text contrast high over busy backgrounds, and respect prefers-reduced-motion and prefers-reduced-transparency.

Frequently asked questions

What is liquid glass CSS?

A technique that combines backdrop-filter, an SVG displacement map, a translucent fill, rim light and a specular highlight to imitate the refractive glass introduced in iOS 26.

How is liquid glass different from glassmorphism?

Glassmorphism only blurs and tints the backdrop. Liquid glass also refracts it, bending the background near the edges like a real lens.

Can I do liquid glass with pure CSS?

The blur, border and highlight are pure CSS. Real refraction needs an SVG filter referenced from backdrop-filter.

Is liquid glass bad for performance?

Backdrop filters are GPU-heavy. Use it on a few surfaces such as nav bars, buttons and sheets, not on every card in a long list.