Liquid Glass Shader for React

Liquid Glass Shader slides four clear glass drops slowly over a pale page ruled with fine diagonal lines. Where two drops meet they fuse into one, with a smooth neck between them. Inside each drop the lines magnify and curve toward the rim; a bright rim and a small glint catch the light from the top left, a thin dark edge rings the glass, a faint rainbow fringes the lines where it bends hardest, and a soft shadow falls to the bottom right. Every pixel is computed each frame by a WGSL fragment shader on WebGPU: the drops are a distance field joined with a smooth minimum, and the page is looked up three times through the glass, once per color channel, which is what makes the lines bend and fringe.

Use it behind a light hero, a product launch or a pricing page that wants the liquid-glass look. For colour seen through reeded glass instead of drops, use Fluted Glass Shader; for the light a glass throws on a table, Glass Caustics Shader. The Metaballs background fuses opaque blobs in CSS, with no refraction. It runs only while it's on screen, holds a still frame with reduced motion, and shows the ruled page with two soft glass rings in browsers without WebGPU.

Installation

Usage

import { LiquidGlassShader } from "@/components/ui/liquid-glass-shader";

<LiquidGlassShader className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold text-slate-900">Clear by design</h1>
</LiquidGlassShader>

Liquid Glass Shader is a container: your content sits on top of the glass, in normal flow. It fills its own box, so give it a height or content. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10". The default page is pale in both color schemes, so use dark text: text-slate-900 keeps 9.8:1 or better over 95% of the frame, and never drops below 3.3:1, even on a ruled line. On a dark backgroundColor, switch to white text.

The drops keep their size and spacing at any aspect: on wide boxes they're sized to the height, on narrow ones to the width. The glass refracts its own ruled page, not the content of your site: WebGPU can't read the page behind it.

Demos

In a card

interactive lets the pointer drag the largest drop, eased, so it works as a magnifier; when the pointer leaves, the drop glides back to its own path. count={2} and size={1.3} give a small surface two large drops, and pattern="grid" rules the page with a square grid, which shows the magnification well. Touch is ignored.

Dark

backgroundColor and inkColor recolor the page and its lines, here blue lines on near-black. The glass reflects the page's own tone, so on a dark page the drops read as smoked glass with bright rims.

Performance

About 0.9 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. The glass is crisp line art, so it renders at full resolution; quality={0.5} halves it, at the cost of softer lines. The animation stops when the shader scrolls out of view, and the browser pauses it in a hidden tab. Every shader on a page shares one GPU device and one frame loop, and vgpu (about 50 KB gzipped) loads only when the first one mounts.

Browser support

The shader needs WebGPU: Chrome and Edge, Safari 26 and later, and Firefox on Windows and macOS. Elsewhere, and until the first frame, the box shows a CSS gradient of the ruled page with two soft glass rings, so the layout never jumps. data-state on the root reads unsupported there, if you want to style around it. See Shader Canvas.

Accessibility

The glass is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame and stops. Nothing flashes: the drops slide a few pixels a second and fuse over seconds. Dark text reads well on the default page (above); keep long body text on a panel if you raise count or size, since the lines bend most under the drops.

FAQ

API Reference