Glassmorphism vs Neumorphism
グラスモーフィズム / ニューモーフィズム
Both sit in UI Expression, so the question is not what they belong to but how they behave. Both are read here as style. They are reached for with some of the same intent, which is where they get confused.
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. |