Neumorphism
Also called: Soft UI, New Skeuomorphism, Neomorphism
Everything is moulded from one soft grey-blue sheet: raised with a light and a dark shadow, pressed in with inset shadows.
Design keywords
Say these words to ask for this style.
Neumorphism treats the screen as a single soft plastic surface. Cards, buttons and inputs are the same colour as the background and only exist through two blurred shadows — white towards the top-left light source, grey-blue towards the bottom-right. Raised means "tap me", inset means "pressed / selected / type here". Colour is limited to one calm accent, borders disappear, corners are generously rounded and the mood is quiet, tactile and calm.
Best for
- Meditation, sleep and wellness apps
- Smart-home and device controls (dials, toggles)
- Music players and calculators
- Small dashboards with few, large controls
Avoid for
- Accessibility-critical products (low edge contrast)
- Dense data tables and enterprise tools
- Text-heavy reading pages
- Brands that need strong colour
✓ Do
- Use one background colour (#E0E5EC) for page, cards and controls
- Pair a white top-left shadow with a #A3B1C6 bottom-right shadow of equal blur
- Show pressed / selected / input states with the same shadows inset
- Keep one accent colour for the primary action and active icons
✕ Don't
- Don’t add borders or contrasting card fills — that is Soft UI Evolution
- Don’t mix light directions or use black shadows
- Don’t rely on the shadow alone for critical states; add accent text or an icon
- Don’t nest more than two depth levels
Not to be confused with
On mobile
Neumorphism is at home on phones: big raised circular controls, an inset search well and a floating raised tab bar whose active icon sinks in. Keep shadow blur ≤ 16px on lists for scroll performance and always pair the inset state with accent-coloured text.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.