Material & theming
One optical system drives every component. Three engines decide how the backdrop is treated; four materials set the weight; tokens make all of it yours.
Engines
The engine is resolved before first paint and carried as data-glass-engine on <html>. All differences live in CSS — components never branch on it.
| Engine | Backdrop treatment | When |
|---|---|---|
| refract | SVG displacement refraction + blur + saturation in one backdrop pass | Detected compositor support |
| frost | Tuned blur, saturation, and brightness with the same specular details | Everywhere else; also the no-JS baseline |
| solid | Opaque surfaces, ring intact, zero transparency | prefers-reduced-transparency, or by choice |
Force an engine for testing with ?glass=frost, ?glass=solid, or ?glass=refract; the choice persists until ?glass=auto clears it.
Materials
| Material | Frost blur | Used for |
|---|---|---|
| film | 8px | Hairline chrome — badges, tooltips, dock icons |
| pane | 16px | Interactive chrome — buttons, alerts, panels |
| slab | 28px | Raised surfaces — cards, docks, toasts |
| veil | 44px | Overlay scale — dialogs, sheets, menus (frost-only by policy) |
Per-instance overrides
Every knob is a custom property. Override them with arbitrary properties in your class list or inline styles:
<Glass
material="pane"
className="[--glass-tint-a:0.4] [--glass-tint-c:var(--success)]"
>
Custom-tinted glass
</Glass>| Token | Controls |
|---|---|
| --glass-blur | Backdrop blur radius for the frost stack |
| --glass-tint-c | Tint color of the surface |
| --glass-tint-a | Tint opacity (0–1); transitions smoothly |
| --glass-refract | url(#…) of the refraction filter (managed per geometry in the refract engine) |
| --glass-depth | Maximum bend at the rim, px (exact optics) |
| --glass-curve | Bevel profile exponent — soft shoulder to hard rim |
| --glass-chroma | RGB split at the rim, 0–1 |
| --glass-spec | In-filter glint strength, 0–1 |
| --glass-saturate | Backdrop saturation boost |
| --glass-edge / --glass-edge-soft | Specular ring, lit and shaded ends |
| --glass-sheen | Pointer-following highlight color |
| --glass-radius | Surface corner radius |
Nesting
Glass inside glass automatically laminates: the inner surface keeps its tint and specular ring but drops its backdrop filter. Stacked blur reads as mush and costs twice — the system simply does not allow it.