Liquid Glass in React

Create Apple-style liquid glass components in React: real refraction, chromatic dispersion and a live specular highlight, exported as code you can paste into your project.

Open the StudioBrowse components

How liquid glass works in React

Liquid glass bends the content behind an element instead of only blurring it. In React that takes three layers: an SVG filter that displaces pixels, a backdrop-filter that applies it, and CSS for the rim light and highlight.

Minimal example

export function Glass({ children }) {
  return (
    <>
      <svg width="0" height="0" aria-hidden="true">
        <filter id="lg">
          <feTurbulence baseFrequency="0.01" numOctaves="1" result="n" />
          <feDisplacementMap in="SourceGraphic" in2="n" scale="40" />
        </filter>
      </svg>
      <div className="glass">{children}</div>
    </>
  );
}

.glass {
  backdrop-filter: url(#lg) blur(6px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 28px;
  background: rgba(255,255,255,.08);
}

This is a simplified starting point. The Studio builds a proper displacement map for your exact size and radius, and exports the full component.

Browser support

Refraction runs in Chromium (Chrome, Edge, Brave, Arc). Other browsers get a blur fallback.

Frequently asked questions