Getting started›Installation

Installation

One package, no dependencies, no build step required.

npm i @edinstvo/glass

Web component

Import the definition once. After that the tag works in plain HTML, React, Vue, Svelte or anything else that renders elements.

<script type="module">
  import "@edinstvo/glass/define";
</script>

<edinstvo-glass style="width: 240px; height: 120px">
  Hello
</edinstvo-glass>

Corners come from --glass-radius, size from your layout.

Without custom elements

import { attachGlass } from "@edinstvo/glass";

const glass = attachGlass(element, { material: { frost: 0.4 } });

glass.set({ material: { refraction: 0.6 } });
glass.destroy();

Plain CSS

No JavaScript or no GPU? The stylesheet gives you .glass, .glass-clear and .glass-frost on top of backdrop-filter. The element falls back to the same look by itself when WebGL is missing.

import "@edinstvo/glass/glass.css";