Morphism, three ways.
Skeuomorphism, neumorphism and glassmorphism are three answers to one question: how do you make pixels feel physical? Same card, same content, three completely different visual languages. Hit a tab and watch it morph — the environment changes too, because each style needs its own.
The morpher shares one canvas, but each language actually leans on a different backdrop to work. Here's the same little settings card, three times, each shown in the environment its effects were built for.
Playback
Skeuomorphism
2007–2013 · the iOS 6 era
Imitates real materials — leather, brushed metal, glossy plastic. Layered gradients, inset textures and heavy drop shadows tell your eye an element is a physical, pressable thing.
background: linear-gradient(160deg,#4a4038,#2e2721);
box-shadow: 0 20px 46px rgba(0,0,0,.6),
inset 0 1px 0 rgba(255,255,255,.13);
Playback
Neumorphism
2020 · soft UI
One background colour, no borders. The element is the same colour as its container and gets two shadows — light top-left, dark bottom-right — so it looks extruded from the surface, or pressed into it.
background: #e0e5ec;
box-shadow: 9px 9px 18px #b8bec7,
-9px -9px 18px #ffffff;
Playback
Glassmorphism
2013 iOS 7 · revived 2020, macOS Big Sur
Frosted, translucent panels floating above a vivid background. A backdrop blur, a thin light border and a soft shadow sell the illusion of layered, semi-transparent glass.
background: rgba(255,255,255,.12);
backdrop-filter: blur(16px) saturate(150%);
border: 1px solid rgba(255,255,255,.28);
| trait | Skeuomorphism | Neumorphism | Glassmorphism |
|---|---|---|---|
| core idea | Mimic real objects | Extrude from the background | Frosted glass over colour |
| background | Rich textures & gradients | One flat muted colour | Vivid & colourful |
| shadows | Deep, realistic | Dual (light + dark) | One soft ambient |
| borders | Bevels & highlights | None — shadows do it | Thin, light, translucent |
| key css | gradient + box-shadow | dual box-shadow / inset | backdrop-filter: blur() |
| contrast | High | Low (its weak spot) | Depends on backdrop |
| watch for | Dated if overdone | Weak affordance / a11y | Readability & GPU cost |