Visual style reference · web UI aesthetic
Liquid Glass
An iridescent, flowing glass aesthetic with chromatic aberration, dynamic color shifts, and multi-layered transparency that mimics liquid motion on glass.
Back to the visual style atlas01 · CSS hints
How to build it in CSS
Multiple layered background gradients with opacity; backdrop-filter: blur() saturate(); border with gradient; CSS animation or @property for hue rotation; mix-blend-mode.
02 · Coding-agent prompt
What to tell your agent
Create a liquid-glass surface with multiple translucent gradient layers, background blur, border gradient, and a slow hue-rotation animation. Use mix-blend-mode to create iridescent color shifts where layers overlap.
03 · When to use
Good fits for Liquid Glass
Premium-brand hero sections; music or media-player backgrounds; event-promotion micro-sites; any interface where a futuristic aesthetic aligns with the brand.
04 · When to avoid
Skip Liquid Glass when…
Text-heavy interfaces where readability is primary; performance-constrained mobile pages; forms where field visibility is critical.
References
Sources
Frequently asked questions
Liquid Glass: common questions
Direct answers based on the reviewed behavior contract above.
What is the Liquid Glass visual style?
An iridescent, flowing glass aesthetic with chromatic aberration, dynamic color shifts, and multi-layered transparency that mimics liquid motion on glass. It is one of 13 reviewed web UI visual aesthetics in this reference set.
How do I tell my coding agent to use this style?
Copy the prompt snippet above and paste it into your agent. The key CSS properties are: Multiple layered background gradients with opacity; backdrop-filter: blur() saturate(). Adjust colors and values to match your brand.
When should I avoid using Liquid Glass?
Text-heavy interfaces where readability is primary; performance-constrained mobile pages; forms where field visibility is critical. Always verify that the visual style serves the user task before committing to an aesthetic.
Name the UI element too