What Is Neumorphism and How Do You Use It in UI Design?

Neumorphism (also called soft UI) is a visual style that makes interface elements look like they are molded from the same material as the background. It does this with two shadows: a light shadow on one side and a dark shadow on the opposite side, both derived from the background color. The result is a soft raised or pressed effect. Use it when you want a calm, tactile look for a small set of controls and you can keep contrast high enough for text and icons. Avoid it as the only way to signal interactivity, because its low-contrast surfaces often fail accessibility checks.

What Neumorphism Actually Is

Neumorphism sits between two older styles:

• Skeuomorphism copies real-world materials in detail (leather, metal, glass) and uses strong depth, texture, and bevels.
• Flat design removes depth entirely and relies on solid color, typography, and spacing.
• Neumorphism keeps depth but removes texture. It uses the background color itself as the element color, then adds a light and a dark shadow to imply a soft extrusion or an inset.

The defining rule: the element and the background share the same base color. Depth comes only from shadow, not from a different fill.

How to Build the Effect

The mechanics are simple and can be reproduced in CSS or any design tool that supports two drop shadows.

1. Pick a base color. A mid-tone works best because you need room to go lighter and darker. Very dark or very light bases leave little contrast range.
2. Choose one light source. Decide the light comes from the top-left (the common convention). The light shadow goes top-left, the dark shadow goes bottom-right.
3. Derive the two shadow colors. Lighten the base for the highlight, darken it for the shadow. Keep the hue the same so the surface looks continuous.
4. Set blur and offset. A soft, large blur with a moderate offset reads as raised. Swapping the shadow positions (dark on top-left, light on bottom-right) reads as pressed or inset.
5. Verify contrast. Check that text, icons, and focus states remain readable against the surface.

A minimal raised button in CSS:

.button {
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow: 6px 6px 12px #b8bcc2,
             -6px -6px 12px #ffffff;
}

.button:active {
  box-shadow: inset 6px 6px 12px #b8bcc2,
              inset -6px -6px 12px #ffffff;
}

The :active state flips the shadows inward, which is what makes the press feel physical.

Where It Works and Where It Fails

The Accessibility Problem

The core weakness is contrast. Because the element and background share a color, the boundary between them can be nearly invisible. This creates two failures:

• Affordance failure. Users cannot tell what is clickable. A raised card and a raised button may look identical.
• Contrast failure. Text placed on a soft surface may not meet minimum contrast ratios, and focus indicators can disappear.

Practical fixes:

• Keep body text and icons at high contrast against the surface, not just against the page.
• Add a visible focus outline that does not rely on the soft shadow.
• Use neumorphism for decoration and state, but pair it with a conventional cue (label, icon, border) for anything interactive.
• Test in grayscale. If the interface becomes unusable, the depth is doing too much work.

When to Choose It

Choose neumorphism when the product is simple, the control count is low, and a soft, premium feel matters more than dense information display. Skip it when the interface is data-heavy, when accessibility requirements are strict, or when users need to identify many interactive elements at a glance. A common middle path is to use neumorphic surfaces for containers and switches while keeping buttons and inputs visually conventional.