aesthetic
Glassmorphism
also called frosted glass, acrylic (fluent)
A style where surfaces are translucent and blur what is behind them, separated from the backdrop by a hairline edge and a soft shadow.
Four ingredients make the look: a blurred sample of the backdrop, a light tint over it, a one pixel border catching the edge, and a shadow holding the panel off the surface. Drop the border and it stops reading as glass; drop the shadow and it sinks into the background.
It is doing a real job when it is used for layers that float over content, since you can see what is underneath and still read what is on top. Apple builds this into the platform as materials, Microsoft calls it acrylic, and both sets of guidance say the same thing: use it for chrome that sits above content, not for the content itself.
The risks are contrast and cost. Text on glass is legible over one backdrop and
unreadable over the next, so the tint has to be strong enough to guarantee contrast
against anything that can scroll under it. backdrop-filter is also expensive to
composite, and a page full of glass panels will show it. Against
neumorphism: glass is about layers you can see through, neumorphism
is about shapes pushed out of a single opaque surface.
Which word?
| If you want | say |
|---|---|
| a translucent panel that blurs whatever is behind it | glassmorphism |
| controls extruded from one flat background colour | neumorphism |
| controls are a glass layer that bends the content behind | liquid glass |
| an opaque window background tinted by the wallpaper | mica |
| see-through window chrome from the Vista and 7 era | windows aero |
| foreground colour that reacts to the blur behind it | vibrancy |
Related
See also: Claymorphism · Reduced transparency
Implementations
Specimens illustrate the concept; for production use, start here.
| hig | Materials |
| fluent | Acrylic |