Presets

Ready looks from the community. Pick one in the Playground, or copy the attributes. Want to add yours? One JSON file in registry/presets, it merges by itself when valid (how).

Crystal

Thin bevel that bends the scene hard. Sharp, glassy buttons.

<div data-glass="liquid" data-glass-bezel="14" data-glass-refraction="34" data-glass-dispersion="0.8" data-glass-specular="0.7"></div>

startGameGlass({"blur":10})

by @mur4i · try it

Diamond gem

A cut gem: diamond outline, faceted lens, strong dispersion.

<div data-glass="liquid" data-glass-shape="diamond" data-glass-lens="gem" data-glass-facets="8" data-glass-dispersion="0.9" data-glass-specular="0.6"></div>

by @mur4i · try it

Frost

Plain frosted glass, no rim. Best for large panels with text.

<div data-glass></div>

startGameGlass({"blur":18,"saturation":1.1})

by @mur4i · try it

Kaleidoscope

Mirrors whatever is behind the element into eight slices.

<div data-glass="liquid" data-glass-lens="kaleidoscope" data-glass-facets="8"></div>

by @mur4i · try it

Liquid

The default liquid glass: soft bevel, light refraction and color split.

<div data-glass="liquid"></div>

by @mur4i · try it

Soft lens

Wide, gentle bevel with almost no color split. Calm and premium.

<div data-glass="liquid" data-glass-bezel="40" data-glass-refraction="16" data-glass-dispersion="0.1" data-glass-specular="0.3"></div>

startGameGlass({"blur":20,"saturation":1.05})

by @mur4i · try it