MIT-licensed · TypeScript · React 18+

Apple liquid glass,
as a React component

Wrap anything in <LiquidGlass /> and it refracts the background like real glass — pure SVG turbulence and a displacement map over backdrop-blur. No WebGL, no canvas, no shaders — just browser primitives, controlled through props.

$npm install react-liquid-glass-svg
Browse examples →
<LiquidGlass />

Everything you need for glassmorphism

  • Apple liquid glassA displacement-mapped effect you can dial to any intensity.
  • Full TypeScriptExhaustive types and autocomplete for every prop.
  • Tailwind-friendlyStyle through className — no wrappers, no clashes.
  • Polymorphic APIRenders as any tag: div, button, section, nav…
  • Cross-browserWorks everywhere, with a Safari & iOS fallback.
  • Zero dependenciesPeer deps only. ESM and CJS in the box.

Every line above sits on real glass — scroll the page and the light shifts with the background.

Examples

Patterns from the wild

Realistic UI surfaces built with a single <LiquidGlass> — preview on the left, the code on the right.

Liquid Skies
Ambient Drift
1:24
3:18

Mini player widget — album art, controls, progress bar.

player.tsx
<LiquidGlass
  glassBorder
  backdropBlur={5}
  tintColor="rgba(255,255,255,0.15)"
  className="rounded-2xl p-5 w-[360px]"
>
  <div className="flex items-center gap-4">
    <AlbumArt />
    <TrackMeta />
    <PlayControls />
  </div>
  <ProgressBar value={42} />
</LiquidGlass>
Playground

Tweak it live

Every slider drives the real component. The code on the right updates in real time — copy and paste.

<LiquidGlass />
Live glass

Drag the controls and watch the refraction change as the background bends.

tintColorrgba(255, 255, 255, 0.18)
sandbox.tsx
<LiquidGlass
  backdropBlur={2}
  tintColor="rgba(255, 255, 255, 0.18)"
  displacementScale={150}
  turbulenceBaseFrequency={0.008}
  turbulenceSeed={1.5}
  glassBorder
  style={{ borderRadius: 28 }}
>
  <div className="px-[34px] py-8">
    <div className="font-mono text-[11.5px] uppercase tracking-[0.04em] text-white/75">
      &lt;LiquidGlass /&gt;
    </div>
    <h3 className="mt-2.5 font-disp text-[26px] font-semibold text-white">
      Live glass
    </h3>
    <p className="mt-2.5 text-[14.5px] text-white/[0.88]">
      Drag the controls and watch the refraction change as the background bends.
    </p>
  </div>
</LiquidGlass>