Neomorphism

One surface, one colour, one light. Nothing sits on top of the page — everything is pushed out of it or pressed into it.

Definition

Extrusion, not layering

Skeuomorphism put objects on a background. Neomorphism refuses the second material entirely. The button is the same plastic as the page, moulded upward; the input is the same plastic, pressed down. There is no border, no fill, no shadow that falls onto something else. There is a light shadow on one side and a dark shadow on the other, and that pair of shadows does one hundred percent of the work.

It arrived as a Dribbble phenomenon around 2019 — sometimes called soft UI — and for about a year it was inescapable in concept shots. It is beautiful in a static image. That turns out to be the problem.

The rules

How it is actually built

1
The background cannot be white or black.

You need headroom in both directions to place a lighter shadow and a darker one. Somewhere around 8 to 12 percent grey is the working range.

2
Two shadows, opposite corners, same blur.

Light at top-left, dark at bottom-right, identical offset. Any asymmetry and the surface stops reading as a single moulded sheet.

3
Inset is the pressed state.

Flip both shadows inward on :active. It is the only press feedback the language has, and it is remarkably satisfying.

4
Corner radius stays generous.

Soft shadows on a sharp corner read as a rendering artefact. Sixteen pixels is a floor, not a ceiling.

5
Colour is a guest.

One accent, used on maybe three elements per screen. The moment a second hue appears the monochrome illusion collapses.

Specimen

Controls, extruded

The catch

It fails contrast by construction

A neomorphic button is the same colour as the page it sits on. WCAG 2.1 requires a non-text interface component to have a 3:1 contrast ratio against its surroundings so that a person can tell it is a control at all. A shadow is not a colour difference. The button below is unambiguously a button to most sighted users in good light, and unambiguously invisible to a lot of people who are not.

Surface vs page — 1.0:1 Needs 3:1 — fails Body text — 6.7:1 — passes

This page keeps its text honest and lets the components demonstrate the flaw, because pretending otherwise would be a worse lesson. In production the fix is unglamorous and it works: give every interactive element a real border or a real fill, keep the twin shadows as texture, and accept that you now have soft UI rather than pure neomorphism.

Where it went

Straight into the accessibility literature as a cautionary example. By 2021 the trend had collapsed almost entirely in shipped product, having never really escaped the portfolio shot it was born in.

What survived

The soft double shadow itself. Strip out the dogma that everything must be one colour and you are left with a genuinely pleasant way to give a card weight — visible now in dashboards, smart-home apps and a good deal of fintech.

The other eight