Liquid Glass
tune me on the right →
glasskit-js · Apple / Figma liquid glass · zero dependencies
Liquid Glass for any element — tune it visually, switch between CSS, SVG, clone and WebGL rendering, and copy production code for React, Vue, vanilla, web component or Tailwind. Real refraction, in every browser.
Four engines, one switch CSS, SVG displacement, clone mode and WebGL — per element.
Beyond Chromium Real refraction that also works in Safari and Firefox.
Any shape, any framework Cards, pills, circles — vanilla, React or a web component.
Zero dependencies One file, a few kB gzipped, MIT licensed.
Drag the glass over the artwork, tune the sliders — they mirror Figma's Glass panel — then copy the code in your framework.
Drag the sliders — they mirror Figma's Glass panel exactly. Or start from a preset and adjust from there.
CSS for everywhere, SVG or clone for real refraction, WebGL for fixed backgrounds. The trade-off is visible live, and the benchmark puts numbers on it.
Grab the code in your framework, or npm i glasskit-js — one file, zero dependencies, types included.
Most tools pick one technique. Glasskit lets you change it per element — and tells you the catch.
| Engine | Real refraction | Browsers | Refracts | Best for |
|---|---|---|---|---|
| css | no (blur) | all | live backdrop | default UI, mobile, Safari/FF |
| svg | yes | Chromium | live backdrop | the “wow” surface on Chrome |
| svg-clone | yes | all | a cloned DOM element | cross-browser refraction |
| webgl | yes | all | img / canvas / video | hero over a fixed background |
| auto | — | — | — | picks the best for each browser |