Liquid Glass
A see-through surface for controls that float over content: it blurs and tints the backdrop, lights its rim, and in Chromium bends the backdrop at the edges like a lens.
Liquid glass blurs and tints what's behind it, and bends it at the rim in Chromium.
Installation
pnpm dlx shadcn@latest add @jds/liquid-glass
Usage
import { LiquidGlass } from "@/components/effects/liquid-glass"
<LiquidGlass className="flex items-center gap-1 rounded-full p-1.5">
{/* controls */}
</LiquidGlass>API Reference
LiquidGlass
| Prop | Type | Default |
|---|---|---|
refractionHow far the edge bends the backdrop, in px. 0 turns it off. Capped at 0.9 × bezel so the rim squeezes rather than mirrors. | number | 24 |
bezelWidth of the curved rim that bends light, in px. | number | 24 |
blurBackdrop blur in px. Doubled where refraction isn't supported. | number | 6 |