Neumorphism

You might say

Make the buttons look like they're softly raised out of the background in the same color palette.

Use paired soft shadows to make controls appear pressed from one surfaceNeumorphism, or Soft UI, uses highlights and shadows on nearly identical foreground and background colors. It can create a distinctive decorative object, but the low contrast often makes buttons, states, and boundaries difficult to perceive. Use it sparingly and test accessibility in real conditions.

Scroll sideways to explore the full example

HOME / LIVING ROOMGood night mode22:41

Indoor temperature24°Comfortable

Air qualityExcellent

Night atmosphereOn

Design Principles

Keep readable text and controls above contrast requirements
Use the effect on a small number of large surfaces
Add clear state changes beyond shadow direction
Maintain one consistent light source
Provide visible outlines or color where function depends on the boundary

When to use it

Concept art and visual experiments
⏮▶⏭
A decorative media control
◐
A small themed widget
In everyday interfaces, limit neumorphism to noncritical areas.
Brand imagery where usability is not carried by the shadow alone
12:30

When NOT to use it

Build a dense form or dashboard entirely from low-contrast surfaces
Gray text and similar backgrounds reduce the readability of long text.
Use shadow direction as the only selected state
Name?Button?
Place small controls in bright outdoor viewing conditions
Buy now
Assume soft appearance means easy interaction
In sunlight

History

December 2019

A banking concept goes viral

Alexander Plyuto's concept showed controls appearing to press out of a same-colored surface and drew exceptional attention on design platforms.

2020

Soft UI reaches its peak

The style gained the name Neumorphism, and tutorials, UI kits, and generators appeared across the design community.

2020–2021

Accessibility criticism follows

Very low contrast made controls and backgrounds difficult to distinguish, especially in bright conditions, so real product adoption stayed limited.

Today

The style returns to a decorative role

Neumorphism now appears mainly in concept work, media controls, and isolated accents rather than complete production interfaces.

Anatomy

Same color base #e3e9f2 ↖ white soft light ↘ gray-blue shadow Soft large rounded corners Depressed press

Use similar backgrounds to unify vision, but provide additional readable text and control boundaries.

Soft highlights can hint at the direction of the light source and should not be the only status indicator

Shadows can add volume; be strong enough not to interfere with text and focus

Fillet size follows component and brand; don’t make outlines difficult to recognize

The indentation effect can represent slots or levels, and active states should still use clear labels and feedback

AI Prompt

Small neumorphic media widget on #e3e9f2, paired light and dark soft shadows, extruded controls, large rounded corners, visible labels and outlines, contrast kept above accessibility requirements

Typical use cases

Media control

Scroll sideways to explore the full example

HOME / LIVING ROOM23:14

Indoor temperature24°Comfortable

Reading lamp40% brightness

Night AmbienceEnabled

Low-risk control · Critical safety equipment does not use neomorphism

Concept page

Scroll sideways to explore the full example

◐ ♪

Dribbble concept draft · Demonstrate skills, not online

Themed widget

Scroll sideways to explore the full example

Workbench

This week’s data

The number of views and interactions are increasing, and they will continue to grow.

View details →

12k views

Correct posture: a new mimic card is used as decoration, and the rest is as usual

Decorative illustration

Scroll sideways to explore the full example

Password

↑ Find the input box and login button - this is why it cannot go online

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website