Glasskit

Drop-in Apple / Figma "Liquid Glass" for the web.

The only liquid-glass tool that lets you switch the rendering engine (pure CSS · SVG displacement · cross-browser clone · WebGL), apply it to any element/shape, and use it from vanilla JS, a web component, or React — with zero dependencies.

🎛️ Try the generator → — tune it visually and copy the code in any framework.

npm i glasskit-js

npm: glasskit-js · global: Glasskit · web component: <glass-kit>

---

Usage

<!-- vanilla / CDN -->
<script src="https://unpkg.com/glasskit-js"></script>
<script>
  const g = Glasskit.apply(document.querySelector('#card'), {
    mode: 'auto', frost: 8, refraction: 90, dispersion: 0.5
  });
  g.update({ frost: 12 });  // hot-update   ·   g.destroy();
</script>

<!-- web component (registered automatically) -->
<glass-kit mode="auto" refraction="90" dispersion="0.5"
           style="width:340px;height:210px;border-radius:30px">Glass</glass-kit>

// React
import Glass from 'glasskit-js/react';
<Glass as="button" mode="auto" refraction={90} dispersion={0.5}
       style={{ borderRadius: 999, padding: '14px 28px' }}>Get tickets</Glass>

---

Modes — the switch nobody else gives you

Mode	Real refraction	Browsers	Refracts	Best for
css	✗ (blur)	all	live backdrop	default product UI, mobile, Safari/FF
svg	✓	Chromium	live backdrop	the "wow" surface on Chrome/Edge
svg-clone	✓	all	a cloned DOM element	cross-browser refraction over DOM
webgl	✓	all	an img/canvas/video	hero over a fixed background/video
auto	—	—	—	Chromium→svg, else svg-clone if background set, else css

svg-clone is the cross-browser trick: Safari/Firefox don't allow an SVG filter in backdrop-filter, so it clones the background element and filters the clone instead. It refracts DOM, not <canvas> pixels — use webgl for canvas/video backgrounds.

Params ↔ Figma's Glass panel

Figma slider	Option		Optical extras	Option
Frost	frost		curvature (sphere→squircle)	curvature
Refraction	refraction		convex↔concave	convexity
Depth	depth		tint	tint, tintOpacity
Dispersion	dispersion		corner radius	radius
Splay	splay		face gloss	sheen, sheenColor, sheenAngle
Light (angle / %)	lightAngle / lightIntensity		drop shadow	shadow

• tint takes either "r,g,b" (paired with tintOpacity) or a full CSS gradient — tint="linear-gradient(180deg, rgba(255,255,255,.2), rgba(19,19,19,.22))".
• sheen is the diagonal face gloss (0 = off). sheenColor takes "r,g,b" or any CSS color (rgb()/rgba()/hsl()/hex/named). sheenAngle rotates the gloss in degrees; omit it (or null) to follow lightAngle.
• radius sets border-radius on the element and the refraction map — radius={999} alone gives you a pill; no need to also set it in style.
• shadow is any CSS box-shadow ("none" removes it); the inner light border/bezel follow lightIntensity.

Shapes

Any rounded rectangle (incl. pills & circles) works with zero extra code — a ResizeObserver regenerates the refraction map on resize. Arbitrary outlines (blobs, SVG paths) keep the blur/tint/highlight via clip-path, but refraction edges assume a rounded box; supply a custom displacement map for true custom outlines.

---

Built something with it, or want to hack on the engine, generator, or benchmark? See CONTRIBUTING.md.

License

MIT — see LICENSE.