Liquid Glass
Understand Liquidify's independent web material model and terminology.
Liquidify is an independent web implementation inspired by Apple's Liquid Glass design language. It is not an Apple product, is not affiliated with Apple, and does not claim that browser rendering is identical to a native platform implementation.
The material is a CSS and SVG surface assembled from three visible concerns:
- Refraction supplies the optical shape where the browser supports the complete filter path.
- Backdrop treatment supplies blur and saturation over ordinary page content.
- Tint and specular treatment communicates the edge, emphasis, and color of the surface.
Applications do not provide a screenshot or captured bitmap. The engine works over the DOM already behind the control.
Material vocabulary
The public material axis has three values:
| Value | Use |
|---|---|
frosted | More diffuse separation from a busy backdrop |
regular | The default balance for most controls and surfaces |
clear | A lighter treatment when content behind the surface remains readable |
Material is separate from color scheme, tint, component variant, and backdrop volatility. Keep those concepts independent in a design system so a change in emphasis does not accidentally change theme or performance behavior.
Design around the fallback
Glass is progressive enhancement. Information hierarchy, labels, focus indication, and hit targets must remain understandable even when a browser renders frost and specular treatment without the full refraction effect. Never use transparency alone to communicate state.