Markup

Everything is driven by data-* attributes on your elements. Changes are picked up by themselves: add, remove or edit an attribute and the glass follows on the next frame.

Attributes

Attribute	Values	Set by	Effect
data-glass	(empty) | liquid	you	Marks the element. Empty is frosted glass; "liquid" adds the bevelled rim with refraction, color split and highlight.
data-glass-bezel	px	you	Width of the bevelled rim.
data-glass-refraction	px	you	How far the rim (or the gem facets) bend the backdrop.
data-glass-dispersion	0 to 1	you	Color split on the rim and in the lenses.
data-glass-specular	0 to 1	you	Strength of the rim highlight and of the gem cut lines.
data-glass-shape	diamond	you	Diamond outline instead of the rounded box. border-radius rounds its tips.
data-glass-lens	gem | kaleidoscope	you	Faceted cut gem, or the backdrop mirrored into slices around the center.
data-glass-facets	number	you	Facets of the gem (default 8) or slices of the kaleidoscope (default 6).
data-glass-backdrop	bright | dark	library	Brightness of what is behind the element, so the text can flip color. Hysteresis keeps it from flickering.

Any fine tuning attribute (or a lens) also turns the rim on for a plain data-glass element.

Frosted or liquid?

Use frosted (data-glass) for large panels with content: lists, forms, chat. A bevel there competes with the text. Use liquid (data-glass="liquid") for small, highlighted pieces: buttons, pills, orbs, docks, HUD widgets.

<section class="inventory" data-glass>...</section>
<button class="action" data-glass="liquid" data-glass-bezel="14" data-glass-refraction="20">Use</button>

Shape follows your CSS

The glass reads the element's box every frame:

• border-radius (from border-top-left-radius) rounds the glass, including 50% circles and 999px pills;
• the opacity of the element and all its parents fades the glass, so CSS fade animations work;
• the nearest parent with overflow other than visible clips it;
• transform: scale() and translate() work; rotations are clipped to the bounding box.

If you change the radius through inline style, call refresh() on the handle. Class and data-glass* changes are detected automatically.

Text color

data-glass-backdrop is written by the library from the brightness behind each element, with hysteresis so it does not flicker:

[data-glass-backdrop='bright'] { color: #111; }
[data-glass-backdrop='dark'] { color: #fff; }