mizuui-liquid-glass-core

The rendering engine behind the liquid glass effect. No framework, no build step — plain ESM.

It generates a displacement map for a rounded rectangle and feeds it to an SVG feDisplacementMap that runs inside backdrop-filter, so the content behind the element is genuinely refracted through a bevel. There is no blur by default: this is glass, not frost.

npm install @mizuui/liquid-glass-core

import { createLiquidGlass } from "@mizuui/liquid-glass-core";

const glass = createLiquidGlass(document.querySelector("#panel"), {
  radius: 28,
  depth: 12,
  strength: 70,
});

glass.update({ strength: 100 });
glass.destroy();

Options

| Option | Default | Description | | --------------------- | ------- | ------------------------------------------------------- | | radius | 24 | Corner radius in px. | | depth | 10 | Thickness of the refracting bevel in px. | | strength | 60 | Maximum backdrop displacement in px. | | falloff | 2 | Bevel curve. Higher pushes the bend towards the edge. | | chromaticAberration | 3 | Per-channel offset in px. | | blur | 0 | Backdrop blur. Anything above 0 starts looking frosted. | | saturation | 1.6 | Backdrop saturation multiplier. | | brightness | 1.04 | Backdrop brightness multiplier. | | specular | 1 | Specular rim intensity, 0 disables it. | | resolution | 512 | Max pixel size of the generated displacement map. | | fallbackBlur | 8 | Blur used where SVG backdrop filters are unsupported. |

The instance resizes itself via ResizeObserver; call refresh() if you move it in a way that observer cannot see.

Browser support

backdrop-filter: url(#filter) currently works in Chromium. Safari and Firefox fall back to fallbackBlur plus the specular rim.

Related packages

• @mizuui/liquid-glass-vue — <LiquidGlass> for Vue 3
• @mizuui/liquid-glass-react — <LiquidGlass> for React

Development

This package is part of the Liquid Glass monorepo. See BUILDING.md for how to build from source and PUBLISHING.md for the release process.

License

MIT © MizuUI