LiquidGlass is a single React component that renders real liquid-glass refraction using SVG feDisplacementMap inside a backdrop-filter, instead of a flat blurred rectangle.

How is it different from regular glassmorphism?

Standard glassmorphism uses backdrop-filter: blur(). LiquidGlass adds a noise-driven SVG displacement map on top, so the backdrop is actually warped — like real curved glass — not just blurred.

Which browsers support LiquidGlass?

Chrome and Edge 85+, Safari 14+, and Firefox 103+. On older browsers it gracefully degrades to a tinted rectangle.

Is LiquidGlass free to use?

Yes — LiquidGlass is MIT-licensed and free for personal and commercial use.

LiquidGlass — Apple-style liquid glass for React

Interactive Playground

Tweak every prop in real time. The aerial photo behind the glass makes the displacement and refraction effects easy to see — the code snippet at the bottom updates as you go.

Shape

Tint

Noise Type

Scale — warp intensity 20

Blur 0px

Wobble animation Drag — follow cursor

TSX — LIVE

React Usage

Drop-in examples — minimal, fully-customized, and polymorphic (render as a link, div, or any element via the as prop).

TSX

import { LiquidGlass } from 'liquidglass'

// Minimal
<LiquidGlass>Click me</LiquidGlass>

// Fully customized
<LiquidGlass
  variant="pill"
  tint="rgba(88,28,135,0.25)"
  blur={0}
  scale={24}
  hoverScale={46}
  noiseType="fbm"
  seed={88}
  frequency={4}
  octaves={4}
  rim="rgba(167,139,250,0.30)"
  specularColor="rgba(200,180,255,0.22)"
  shadow="0 8px 32px rgba(88,28,135,0.25)"
  animate
  wobble={false}
  padding="14px 36px"
  as="button"
  onClick={handleClick}
>
  Nebula
</LiquidGlass>

// Circle wobble
<LiquidGlass
  variant="circle"
  width={120}
  height={120}
  tint="rgba(127,29,29,0.28)"
  noiseType="ridged"
  scale={38}
  wobble
  rim="rgba(239,68,68,0.30)"
>
  🔥
</LiquidGlass>

// As nav link
<LiquidGlass as="a" href="/about" variant="pill" scale={12}>About</LiquidGlass>