Liquid Glass Panel

A frosted container that physically refracts the content behind it via SVG turbulence + displacement — not a simple backdrop blur. Sub-pixel-crisp text on top, slow specular sheen, Fresnel-like edge highlight, and a hover boost on the displacement strength. Honors prefers-reduced-motion.

UniqueUI CLI

npx uniqueui add liquid-glass-panel

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/liquid-glass-panel.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Solar Winter · 2026

Real glass, not a blur.

Pixels behind this panel are physically refracted via SVG turbulence — text on top stays pixel-crisp.

Tinted variant

Stronger displacement and a violet tint — useful for modal surfaces or CTA flourishes.

Usage

import { LiquidGlassPanel } from "@/components/ui/liquid-glass-panel";

export default function Example() {
  return (
    <div
      className="relative flex min-h-[440px] w-full items-center justify-center overflow-hidden rounded-xl bg-cover bg-center px-6 py-10"
      style={{
        backgroundImage:
          "url(https://images.unsplash.com/photo-1500964757637-c85e8a162699?auto=format&fit=crop&w=1600&q=80)",
      }}
    >
      <div className="grid w-full max-w-3xl gap-5 md:grid-cols-2">
        <LiquidGlassPanel className="p-7">
          <span className="text-[11px] font-mono uppercase tracking-[0.3em] text-white/70">
            Solar Winter · 2026
          </span>
          <h3 className="mt-3 text-2xl font-semibold text-white">
            Real glass, not a blur.
          </h3>
          <p className="mt-2 text-sm text-white/80">
            Pixels behind this panel are physically refracted via SVG turbulence —
            text on top stays pixel-crisp.
          </p>
        </LiquidGlassPanel>
        <LiquidGlassPanel
          className="p-7"
          tint="rgba(120,90,255,0.18)"
          displacementScale={32}
          noiseFrequency={0.018}
        >
          <h3 className="text-lg font-semibold text-white">Tinted variant</h3>
          <p className="mt-2 text-sm text-white/80">
            Stronger displacement and a violet tint — useful for modal surfaces or
            CTA flourishes.
          </p>
          <button className="mt-4 rounded-full bg-white/15 px-4 py-1.5 text-xs font-medium text-white backdrop-blur-md transition hover:bg-white/25">
            Action
          </button>
        </LiquidGlassPanel>
      </div>
    </div>
  );
}

Props

Prop	Type	Description
`displacementScale`	`number`	Strength of the UV displacement applied to pixels behind the panel. Higher values warp more aggressively.
`noiseFrequency`	`number`	Base frequency of the turbulence noise. Lower values produce larger, glassier ripples; higher values feel more etched.
`tint`	`string`	Overall surface tint applied above the refraction layer.
`borderHighlight`	`boolean`	Whether to render the inner Fresnel-like edge ring and outer drop shadow.
`intensityOnHover`	`number`	Multiplier applied to displacementScale on hover. 1.0 disables the hover boost.
`className`	`string`	Classes for sizing, padding, rounding, and layout of the panel.
`children`	`React.ReactNode`	Content rendered crisply on top of the refraction layer — never filtered.