Liquid Glass Card

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/liquid-glass-card.json"

LiquidGlassCard wraps any content in a glass panel that refracts the live DOM behind it. It builds a per-instance SVG displacement map sized to the panel and applies it through backdrop-filter, running the displacement at three scales to fringe color at the edges (chromatic aberration). A radial highlight tracks the pointer and fades out when it leaves.

True refraction requires backdrop-filter: url() (Chrome and Edge). In browsers without it the card gracefully falls back to a plain frosted blur, so it never renders as a broken transparent box.

For a circular lens that follows the cursor over arbitrary content, see Liquid Glass Lens.

Usage

import { LiquidGlassCard } from "@/components/godui/liquid-glass-card";

Place it over any colorful or detailed backdrop — the more there is behind it, the more the refraction reads:

<div className="relative">
  {/* ...page content / image background... */}
  <LiquidGlassCard className="w-80 p-8">
    <h3 className="text-xl font-semibold">Frosted panel</h3>
    <p>Your content sits crisply above the glass.</p>
  </LiquidGlassCard>
</div>

Tuning the optics

Push strength and dispersion up for a heavier, more prismatic lens, or down for a subtle pane of frost.

<LiquidGlassCard strength={100} dispersion={0.3} blur={4} sheen={0.7}>
  Deep refraction
</LiquidGlassCard>

Props

LiquidGlassCard also forwards every standard <div> attribute (className, style, id, …) to the root element.