Neumorphism UI design: why the soft extruded look fails, and where it can work

What it is

The name blends "new" and "skeuomorphism", the older approach of making interface elements imitate real objects. Neumorphism spread through design showcase sites around 2020 as concept shots of calculators, music players and smart-home controls that looked like soft plastic or pressed paper. It was a reaction to flat design: depth was back, but without the textures and gloss of earlier skeuomorphic interfaces.

The recipe is precise. Element and background share one colour, usually a light grey or pastel. Two shadows shape the element: a light one offset toward the light source, typically top-left, and a darker one offset away from it. Raised controls use outer shadows; pressed or inset controls use inner shadows. There are no borders and little colour.

In CSS it's typically background: #e6e9ef; box-shadow: -6px -6px 14px #ffffff, 6px 6px 14px #b8bec9;, swapped to inset shadows for the pressed state.

Why it fails

No contrast at the edge

WCAG 2.2's non-text contrast criterion asks that the visual information identifying a control, its boundary, reaches 3:1 against what's next to it. A neumorphic button is the same colour as the page, and its soft shadows typically fall far short of that. For people with low vision, or anyone on a dim screen in sunlight, the button may simply not be there.

Weak affordance

Affordance is how obviously something invites an action. Raised and inset shapes look almost identical at a glance, so a visitor can't tell a button from a decorative panel or a text field from a card.

Invisible states

The difference between on and off, or pressed and unpressed, is a reversal of two faint shadows. Toggles and selected options become guesswork. Disabled controls, conventionally faded, are indistinguishable from enabled ones.

Text on top suffers too

To keep the soft look, labels are often set in mid-grey on the light background, which tends to fail the 4.5:1 text requirement as well.

Forced colours erase it

In Windows high-contrast mode, box shadows are removed, so neumorphic controls lose their shape completely unless they also have borders.

Where it can still work

Neumorphism UI design isn't useless; it's narrow. It can work where the controls are few, large and already understood, and where the soft shape is a secondary cue rather than the only one:

• Decorative surfaces that aren't interactive: a product showcase, a background panel, an illustration of a device.
• Single large physical-style controls, such as a big dial or a play button that also has a clear icon and label.
• Hardware-like interfaces in kiosks or apps where the layout is fixed and familiar.

In each case, add what the style leaves out. Give controls a border or outline with 3:1 contrast. Use the action colour for the selected or on state, not just a reversed shadow. Set labels in full-strength text colour. Add a strong focus outline. At that point the result is a softly shaded interface with proper boundaries, which is a reasonable thing to build; it's no longer pure neumorphism, and that's the point.

What to use instead

If what attracted you was the calm, tactile feel, you can get much of it without the problems:

1. Soft surfaces with a hairline border. A card one step lighter or darker than the ground, with a thin line around it, reads clearly and still feels quiet.
2. Rounded shapes by role. Pill-shaped buttons and gently rounded cards give softness through geometry rather than shadow.
3. One shadow, used sparingly, for things that genuinely float, such as menus and dialogs.
4. Colour for state. A filled action-coloured button is unmistakable in a way no shadow can be.

The glassmorphism guide covers the other screen-native style with similar contrast problems, and the shadows in UI design guide covers using depth without losing edges.

Neumorphism and Anticode

Anticode doesn't build neumorphic pages. Its seven design systems separate surfaces with borders and contrast instead: hairline rules in Editorial and Swiss, soft-cornered cards in Playful and Organic, and, at the opposite extreme, 2px black rules and hard offset shadows in Brutalist. Each system also has a visible focus style and an action colour for interactive states, which is exactly what soft UI lacks.

The Critic flags a related habit, the coloured glow under buttons and cards. If you want a softly shaded look, Organic is the closest system: warm, rounded and gentle, but with real edges. The code editor keeps only text, section order and colour tokens, so neumorphic shadows would mean editing an exported copy, and nothing in Anticode checks whether controls there still reach 3:1. Measure them yourself.

Questions people ask

Is neumorphism accessible?

Not as usually designed. Its controls rarely meet WCAG 2.2's 3:1 non-text contrast, and their states are hard to tell apart. Adding borders, colour for states and a focus outline can fix that, at the cost of the pure look.

What's the difference between neumorphism and skeuomorphism?

Skeuomorphism imitates real materials and objects, with textures and detail. Neumorphism keeps only soft depth, with no texture and almost no colour.

Is neumorphism still used?

Mostly in concept work and showcases. Production interfaces that borrowed it usually added borders and colour to make controls usable.