Liquid glass CSS generator.

How the controls map to CSS

Every slider changes a specific part of the exported code, so you can also fine-tune the values by hand afterwards.

• Tint and Tint opacity set the background color, for example rgba(255, 255, 255, 0.13). Picking a dark tint swatch also switches the theme to dark.
• Blur, Saturation and Contrast become backdrop-filter: blur() saturate() contrast(). Saturation above 100% makes colors behind the glass richer instead of grayer.
• Border opacity is the alpha of a 1px white border. Radius is border-radius.
• Shadow controls the outer drop shadow (0 20px 70px). The same value is weighted heavier in the dark theme so it stays visible on dark pages.
• Specular and Rim light control the inset box-shadows and the ::before and ::after gradients that catch light along the top and edges.
• Chromatic edge adds faint blue and pink tints in opposite corners. Noise adds a fine repeating-radial-gradient grain in ::after.
• Progressive blur adds three masked blur layers, stronger toward the edges, and Blur falloff sets how much stronger they get.

Using the exports

Export opens three formats. CSS returns a .liquid-glass class built on backdrop-filter, with the -webkit- prefixed copy, plus its ::before and ::after highlight layers. Add the class to the element you want to turn into glass. With Progressive blur on, the CSS also includes three blur layers: place three empty span elements inside the glass element with the classes lg-blur lg-blur-1, lg-blur lg-blur-2 and lg-blur lg-blur-3, and give your content a position and a z-index above 2 so it sits over the highlights.

Tailwind v4 returns one root div of utility classes with a placeholder for your content. It is HTML, so rename class to className in React. It leaves out Chromatic edge and Noise, and its progressive blur spans use fixed multiples of the Blur value, so Blur falloff only affects the CSS export. The AI Agents prompt lists the material settings, includes the CSS as a reference, and asks your coding assistant to restyle an existing component instead of copying the sample cards.

<!-- With the exported CSS in your stylesheet -->
<div class="liquid-glass">
  <span class="lg-blur lg-blur-1"></span>
  <span class="lg-blur lg-blur-2"></span>
  <span class="lg-blur lg-blur-3"></span>
  <div style="position: relative; z-index: 3">
    <h2>Now playing</h2>
    <p>Track title</p>
  </div>
</div>

Preview over something real

backdrop-filter can only process what is painted behind the element. Over a flat color, glass is just a translucent box. The preview chips switch between six backdrops (Aurora, Product UI, Garden, Sunset, Grid and Candy), and the Backdrop button lets you choose an image from your device. The image is shown with a local object URL and is not uploaded anywhere. Testing over a screenshot of your own page is the quickest way to see whether the blur and tint are strong enough.

Randomize picks a different preset and backdrop; Reset returns to the first preset, the Aurora backdrop and no custom image. The light and dark toggle changes the theme setting, which affects the shadow strength and the text color written into the Tailwind export.

Browser support and the backdrop root

backdrop-filter works in Chrome and Edge 76 and later and Firefox 103 and later. Safari has supported -webkit-backdrop-filter since version 9 and the unprefixed property since Safari 18, which is why both lines are in the CSS export. Tailwind v4's backdrop-blur utilities also write both.

If the glass does not blur the page behind it, check its ancestors. Under the Filter Effects specification, an ancestor with a filter, opacity below 1, a mask, a clip-path or its own backdrop-filter becomes the backdrop root, and the glass only samples what is painted inside that ancestor. Glass nested inside another glass panel, or inside a container that fades in with opacity, often shows this. Because .liquid-glass has its own backdrop-filter, a second glass element placed inside it blurs only the first panel's contents, not the page behind both.

/* Solid fallback where backdrop-filter is unavailable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-glass { background: rgba(255, 255, 255, 0.85); }
}

/* Respect the reduced-transparency setting where browsers expose it */
@media (prefers-reduced-transparency: reduce) {
  .liquid-glass { background: rgba(255, 255, 255, 0.92); }
}

Readability and performance

The contrast of text on glass changes as content scrolls behind it. Judge it against the busiest, brightest part of the backdrop rather than the average, and raise Tint opacity or Blur until text stays readable everywhere. prefers-reduced-transparency lets you serve a more opaque surface to people who ask for one; Chrome and Edge 118 and later support it, Firefox has it behind a preference, and Safari does not support it yet.

Each backdrop-filter element has to re-blur the pixels behind it whenever they change, for example while the page scrolls under a sticky toolbar. Progressive blur adds three more backdrop-filter layers to every surface, so one glass card becomes four blur passes. On a single toolbar or dialog this is rarely noticeable. In a long list of glass cards, or on low-end phones, turn Progressive blur off, lower the blur radius, and avoid animating the blur value itself.

Questions

Does backdrop-filter work in Firefox?

Yes, since Firefox 103. Before Firefox 123 it was disabled on systems where Firefox could not identify the GPU vendor, so a few older installs may still show unblurred glass. A semi-opaque fallback background keeps text readable either way.

Why doesn't my glass blur anything?

Usually there is nothing colorful directly behind it, the tint is close to opaque, or an ancestor with opacity, filter, mask or clip-path has become the backdrop root and limits what the glass can see. Also confirm both backdrop-filter and -webkit-backdrop-filter are present for Safari 17 and earlier.

Is this the same as Apple's Liquid Glass?

It recreates the look rather than the rendering. Apple's material bends the content behind it at the edges like a lens. CSS backdrop-filter can blur, saturate and adjust contrast but not refract, so this tool approximates thickness with highlight gradients, inset shadows and progressive blur.

How do I use the Tailwind export in React?

Change class to className on the root div and the progressive blur spans, and replace the placeholder comment with your component's content. The arbitrary values in the classes need no Tailwind config in v4.