Glassmorphism vs Neumorphism
グラスモーフィズム / ニューモーフィズム
The names sit next to each other and both put pale rounded panels on a pale ground, with no outline and only soft shadow lifting them.
How to tell them apart. Check whether the background shows through the panel. Glassmorphism blurs it and lets it through, while Neumorphism keeps the panel opaque and raises relief with shadow alone.
Glassmorphism
Shows depth and hierarchy through translucent layers, floating information lightly.
Neumorphism
Makes background and controls one material, showing relief through soft shadow alone.
| Glassmorphism | Neumorphism | |
|---|---|---|
| Era | 2020s | late 2010s– |
| Family | UI Expression | UI Expression |
| Kind | Style | Style |
| Cues | Background blur / Translucency / Thin white borders / Color bleed | Same-color surfaces / Two-direction shadows / Rounded parts / Low contrast |
| Best used for | Making layered information feel light · OS-grade refinement and depth | Concept screens with few interactions · A soft, quiet product impression |
| Type | A neutral sans-serif | A concise sans-serif |
| Composition | Stack cards with clear front-to-back order | Big margins, few controls |
| Material | Colored ground, translucent panes, fine edges | Pale ground, one light and one dark shadow, rounded corners |
| Caution | Legibility breaks with the wrong background. Give text surfaces real opacity. | Contrast failure comes easily. Mark key actions and states with color and outline too. |