Essentials›Material

Material

There are no types of glass, only settings. The defaults are tuned against the system glass on macOS.

Set anything three ways. Attributes win over CSS variables.

<edinstvo-glass frost="0.2" refraction="0.6"></edinstvo-glass>

<style>
  edinstvo-glass { --glass-depth: 18; }
</style>

element.material = { frost: 0.2, tint: "#e54d33" };

Settings

Attribute	Range	What it does
`refraction`	0 to 1	How hard the edge bends what is behind it
`depth`	0 to 96 px	Width of the curved edge
`splay`	0 to 1	Spreads the curve from the edge towards the centre
`dispersion`	0 to 1	How far colours split where the glass bends
`frost`	0 to 1	Matte surface, a true gaussian up to 20 px
`transparency`	0 to 1	How much of the backdrop survives the tint
`tint`	CSS colour	Glass colour. `auto` follows the theme
`lift`	0 to 1	Brightens everything behind the glass
`light`	0 to 1	Shading across the curve
`light-angle`	-180 to 180°	Where the light comes from. 0 is the top
`rim`	0 to 1	Thin light line along the edge
`glint`	0 to 1	Sharp highlight on the edge
`bloom`	0 to 1	Glow inside the glass and around it