Skip to main content
Back to all tools

Liquid Glass Generator

Physics-based liquid glass effect using Snell's law refraction, displacement maps, and specular highlights.

This effect relies on SVG backdrop-filter and only works in Chromium-based browsers (Chrome, Edge, Opera, Brave). Firefox and Safari are not yet supported.
Glass Shape
300px
200px
60px
Refraction
80
60
3
1
Appearance
0.3
0.5
4
Inner Shadow
20px
-5px
Glass Tint
6%
Outer Shadow
24px
Preview bg:
Drag the glass to move it over the background
css
.liquid-glass {
  width: 300px;
  height: 200px;
  border-radius: 60px;
  isolation: isolate;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 20px -5px #ffffff;
  background-color: rgba(255, 255, 255, 0.060);
  pointer-events: none;
}

.liquid-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  backdrop-filter: url(#liquid-glass-filter);
  -webkit-backdrop-filter: url(#liquid-glass-filter);
}

Frequently Asked Questions

What is Liquid Glass CSS?

Liquid Glass is a visual design style featuring frosted transparency, refraction-like blur, and soft, dynamic lighting effects. It combines backdrop-filter: blur(), layered gradients, and subtle borders to create elements that appear like translucent glass panels. Apple popularized the term with their 2025 design system update.

Which browsers support Liquid Glass effects?

The core backdrop-filter property is supported in all modern Chromium browsers (Chrome, Edge, Brave, Arc), Safari, and Firefox. However, the full visual fidelity — including sub-pixel blur rendering and gradient compositing — varies. Tip: Chromium-based browsers currently deliver the most complete rendering of these effects.

How do I improve performance of glass effects?

backdrop-filter: blur() is GPU-accelerated but can be expensive on large areas. Tip: keep the glass panel size reasonable (not full-viewport), limit blur radius to 20-40px, and avoid stacking multiple blurred elements. Use will-change: backdrop-filter if the element animates, and test on low-end mobile devices.

How do I make glass effects work on dark backgrounds?

Use a semi-transparent white or light overlay (rgba(255,255,255,0.05-0.15)) as the element background, combined with a light border (rgba(255,255,255,0.1-0.2)). The key is low opacity so the blurred background shows through. Tip: add a very subtle inner shadow for depth separation.

Can I use Liquid Glass with Tailwind CSS?

Yes. Use backdrop-blur-md or backdrop-blur-lg, bg-white/10, border border-white/20, and rounded-2xl for the basic effect. For the highlight edge, add a pseudo-element with a gradient. Tailwind v4 makes this even easier with built-in opacity modifiers and arbitrary value support.