Understanding neumorphism
Soft UI, with one fundamental problem.
The two-shadow trick behind soft UI, why neumorphism failed as a design movement, and the contrast obligation that comes with using it.
Two shadows, one fake light source.
The neumorphic look comes from two box-shadows: one dark and one light, applied to the same element from opposite directions. box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff. The dark shadow simulates light from the top-left casting a shadow on the bottom-right; the light shadow simulates the same light hitting the top-left edge. The result: the element appears to gently pop out of the background like a pillow.
Background colour is the prerequisite.
Neumorphism only works when the element's background colour exactly matches the parent's. Both inner and outer surfaces are the same hue; the depth comes purely from the shadow play. Light shadow on top of a different colour clashes. The design system therefore has to commit to "everything neumorphic shares a base colour" — usually a soft off-white or a pale grey. Mix it with cards in contrasting colours and the effect breaks instantly.
Why it failed as a movement.
Neumorphism trended briefly in 2020 — Dribbble was wall-to-wall pillow buttons — then nearly disappeared. The reason: every neumorphic interface fails WCAG contrast. The whole effect is built on subtle shadows against a background of the same colour; affordance is conveyed by ~3 % luminance difference. People with normal vision can see "this is a button"; people with low vision can't, and even normal-vision users struggle to distinguish "pressed" from "raised" states. Skeuomorphism with the legibility tax priced in.
A worked button.
A raised button: background: #e0e5ec;
border-radius: 12px;
box-shadow: 8px 8px 16px #b8becc, -8px -8px 16px #ffffff; A pressed button (inset shadows instead): box-shadow: inset 4px 4px 8px #b8becc, inset -4px -4px 8px #ffffff. The same two-shadow trick works both directions — outer for raised, inner for pressed. Toggle the inset on click for tactile feedback. Visually charming; accessibility-wise still a problem.
Raised → pressed
outer shadows → inset shadows
Same colours, opposite direction.
8px shadows outer ; inset 4px shadows inner
= Tactile button state
When to use it anyway.
Hobby projects, dribbble portfolios, presentations where the aesthetic is the product. Smart-home apps with limited control density (a thermostat, a smart- light dimmer) where the gentle texture suits the calm register. Fitness dashboards designed for ambient glance-checking. Don't use it for any production interface that has a "click here to submit a payment" button — the affordance has to be unambiguous, and neumorphism's whole aesthetic is to make it ambiguous.
The accessibility workaround.
If you do use it, supplement the shadow with a stronger affordance cue. A 1px accent-warm border on focus. A visible icon inside the button. A distinct hover state with a real colour shift. These additions break the pure aesthetic slightly but bring the button up to WCAG 2.1 AA on focus indicators (1.4.11 Non-text contrast). The compromise is "neumorphism with an asterisk"; the design is honest about its real-world cost.