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

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