Documentation

liquid-glass-cli

A CLI that copies an Apple iOS 26 style Liquid Glass component into your React project. The generated file is yours: no runtime package to install, no version to keep in step.

Installation

Run the CLI from your project root. It detects your framework, resolves the components directory and writes the file.

$npx liquid-glass-cli add liquid-glass

Writes components/liquid-glass.tsx. Re-running overwrites it, so keep local edits in a wrapper.

Usage

Import it and wrap anything. Every prop is optional — the defaults are the iOS 26 material.

1import { LiquidGlass } from "@/components/liquid-glass"
2 
3export function Sheet() {
4  return (
5    <LiquidGlass
6      tint="rgba(17, 21, 27, 0.4)"
7      cornerRadius={24}
8      cornerSmoothing={60}
9      refraction={100}
10      frost={8}
11    >
12      <div className="p-8">
13        <h3>Liquid Glass</h3>
14        <p>Own the file, edit the file.</p>
15      </div>
16    </LiquidGlass>
17  )
18}

Props

Eleven props, plus children. Tune them live in the playground.

PropTypeDefaultDescription

tintstringrgba(17, 21, 27, 0.8)Fill layered on top of the refracted backdrop. Any CSS colour — hex, rgb, hsl, oklch or a CSS variable.

cornerRadiusnumber48Corner radius in pixels.

cornerSmoothingnumber32Continuity of the corner curve. 0 is a plain circular arc, 100 the squircle Apple draws — the same superellipse drives the silhouette, the rim stroke, the displacement map and the browser's own corner-shape.

refractionnumber100How strongly the backdrop bends at the edges. 0–100.

depthnumber85Thickness of the refracting edge band — the perceived glass depth. 0–100.

dispersionnumber100Chromatic aberration: how far the red and blue channels split apart. 0–100.

frostnumber3Backdrop blur in pixels.

splaynumber38How far the bend spreads inward from the rim. 0 is a crisp lens, 100 a wide swell. 0–100.

lightAnglenumber45Direction the specular highlight comes from, in degrees.

lightIntensitynumber38Strength of the specular highlight and the rim stroke. 0–100.

borderWidthnumber1Width of the inside rim stroke in pixels. 0 drops the stroke layer, for when the wrapped element draws its own border.

elevationnumber22Height of the drop shadow cast behind the panel. 0–100, and 0 removes the shadow entirely.

layerClassNamestring—Applied to each effect layer rather than to the container. Use it to mask the glass — a mask on the container would form a backdrop root and blank the effect out.

Recipes

Pill button

Fully rounded, light frost, bright rim.

cornerRadius={999}
frost={4}
lightIntensity={100}

Sheet over photo

Heavy frost so text stays legible on busy imagery.

frost={20}
refraction={40}
depth={40}

Water droplet

Maximum bend and channel split, almost no blur.

refraction={100}
dispersion={100}
frost={0}

Apple squircle

Continuous corners, a thin bevel and a tight rim — the iOS 26 panel.

cornerRadius={28}
cornerSmoothing={100}
depth={45}
splay={25}

Browser support

The refraction layer relies on an SVG displacement filter inside backdrop-filter. Firefox and Safari drop backdrop-filter: url() as invalid, which leaves that layer inert and lets the frost, tint and stroke below carry the effect on their own.

Chrome · fullEdge · fullSafari · partialFirefox · partial