Skip to content

Liquid Glass for the web: React, Vue, Svelte, plain HTML

<liquid-glass> is one custom element, so it works in any framework or none. What you put inside stays ordinary HTML: focusable, selectable, read by assistive technology. The glass is drawn behind it.

The web component in Chromium: the HTML engine over live HTML, the canvas engine over a canvas

Our render: the example in headless Chromium, light scheme.

npm install @shayxo.dev/liquidglass

import '@shayxo.dev/liquidglass';   // registers <liquid-glass>

<liquid-glass interactive>
  <button>Back</button><button>Share</button>
</liquid-glass>

In React, Vue or Svelte, use it like any element: <liquid-glass variant="clear">…</liquid-glass>.

  • HTML engine (default): refracts the live page behind the element in Chromium (Chrome, Edge, Opera, Electron) and frosts it in Firefox and Safari.
  • Canvas engine (engine="canvas"): the production shaders, unchanged, over an image, canvas or video you give it.
  • Compose for web: the full library also runs in the browser through Compose Multiplatform's Wasm target. Live demo.

Next: the web component guide · Limitations