Frost
Make anything glass. Translucent fill, blur and saturation, set by three tokens.
Examples
Frost
Any element
Falls back to a solid surface without backdrop-filter, under reduced transparency or forced colours.
Anatomy
.frost | Any element. Sets the translucent fill and the backdrop blur and removes the border. No padding, radius or shadow: add those yourself. |
API
| Attribute | Values | Description |
|---|---|---|
--ae-frost-bg | boolean | The fill: the surface colour at 66% (light) or 72% (dark). Dialogs, popovers and the combobox list set a thicker mix so text stays legible. |
--ae-frost-filter | boolean | The backdrop filter: blur(var(--ae-blur-m)) saturate(1.8). |
--ae-frost-edge | boolean | The specular top edge as an inset box-shadow. Cards and lists add it; on .frost add it yourself. |
Accessibility
- Translucency lowers contrast over busy backgrounds. Under
prefers-reduced-transparency, forced colours orprefers-contrast: morethe fill turns solid and the blur is dropped. - Without
backdrop-filtersupport the fill is the plain surface colour, so text never sits on an unblurred see-through layer.