Skeuomorphism vs Neomorphism
Both make surfaces feel physical, and both are usually filed under "fake 3D". They get there by opposite means: one draws material, the other only lights it.
Short answer: Skeuomorphism paints the material — paper gradients, stitched dashed borders, an element that is a different colour from the page. Neomorphism paints nothing: the card is the same colour as the background, and two paired shadows are the only thing that makes it exist.
What actually separates them
The confusion is fair. Neither style uses flat colour blocks, both lean on shadow, and both are associated with the same era of interface design. From a screenshot at 50 percent they can look like the same idea.
The difference shows up in one question: what colour is the card? A skeuomorphic card here is a warm paper tone sitting on a darker leather ground, with a 1px solid #2c1d10 outline and a dashed #c4b49a line inset from the edge standing in for stitching. A neomorphic card is #e0e0e0 on an #e0e0e0 page with border: none — it has no outline at all, so the only thing separating it from the background is a light shadow on one corner and a dark one on the other.
Decision table
A filled dot marks the side that handles the dimension more convincingly. It is a judgement, not a rule — several rows are genuinely a tie.
| Dimension | Skeuomorphism | Neomorphism |
|---|---|---|
| Card fill | ● Warm paper gradient, distinct from the page | Identical to the page background |
| Edge | ● 1px solid outline plus a dashed stitch line | No border anywhere |
| Depth source | Gradients inside the element | Paired outer shadows, or inset pair when pressed |
| Radius | 3px to 8px, tight and mechanical | ● 8px to 22px, pill-shaped on buttons |
| Type | Serif body, small caps labels | Single sans, everything at one weight |
| Pressed state | Button darkens and shifts down 1px | ● Shadow pair reverses, element appears to sink |
The CSS that changes
These are the declarations that make the difference visible. Everything else — font sizes, spacing, section order — is shared, because both pages use the same markup.
| Property | Skeuomorphism | Neomorphism |
|---|---|---|
| Card | background: linear-gradient(180deg, #fffaf0, #eae0cd) |
background: var(--bg) |
| Outline | border: 1px solid #2c1d10; inner border: 1px dashed #c4b49a |
border: none |
| Depth | box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(0,0,0,.25) |
box-shadow: var(--up) / var(--in) |
| Radius | border-radius: 3px |
border-radius: 22px |
When each one wins
Skeuomorphism wins when
- The interface is meant to feel like an object — a notebook, a mixing desk, a till — and the material is part of the metaphor
- There is very little content per screen, so the texture has room and does not compete with text
- The audience is not design-literate and responds to recognisable physical cues rather than to typographic hierarchy
Neomorphism wins when
- You want a soft, quiet surface without textures, and the page carries one idea at a time
- Every element is a control — buttons, toggles, sliders — where the pressed state can carry the entire interaction language
- You can afford to keep the palette to a single value, which is the condition the style depends on
Steering a model to one or the other
The sentence that decides it is whether the element is a different colour from the page. Say that the card is a warmer tone than the ground with a 1px dark outline and a dashed stitch line, and you get skeuomorphism. Say the card is the same value as the page, has no border, and is shaped only by a light shadow on one side and a dark one on the other, and you get neomorphism. A model asked for "soft 3D" without that clause will produce a drop shadow on a white card, which is neither.