What is neumorphism?

Neumorphism (or "soft UI") is a design style that makes elements appear to extrude from or press into the background surface. It uses two box-shadow values - one light and one dark - to simulate extruded plastic or clay. It was popularized in 2020 as an evolution of skeuomorphic design.

The CSS recipe

/* Raised (extruded) effect */
.neumorphic {
  background: #e0e5ec;
  box-shadow:
    6px 6px 12px rgba(0, 0, 0, 0.15),
    -6px -6px 12px rgba(255, 255, 255, 0.7);
  border-radius: 12px;
}

/* Pressed (inset) effect */
.neumorphic-pressed {
  box-shadow:
    inset 6px 6px 12px rgba(0, 0, 0, 0.15),
    inset -6px -6px 12px rgba(255, 255, 255, 0.7);
}

Accessibility note

Neumorphism is controversial in accessibility circles. The low contrast between the element and background can make interactive elements difficult to identify for users with low vision. Ensure interactive elements have sufficient contrast and visible focus indicators.

Design history and context

Neumorphism was popularized by designer Michal Malewicz in early 2020 through a Dribbble post that went viral and sparked intense design community debate. It emerged as a reaction to flat design's loss of affordance cues - flat interfaces had swung so far from skeuomorphism that interactive elements were sometimes indistinguishable from decorative ones. Neumorphism attempted to restore tactile visual feedback using subtle shadows rather than realistic textures. The debate highlighted the fundamental tension between aesthetic novelty and practical usability.

When not to use neumorphism

Neumorphism is inappropriate for any element that must be clearly recognizable as interactive:

Primary CTAs (call-to-action buttons): users must instantly identify them as clickable. The low-contrast neumorphic style fails this requirement.
Form inputs: fields and checkboxes must meet WCAG 2.1 level AA contrast requirements (3:1 for UI components). Neumorphic inputs routinely fail this.
Navigation: any element users need to find and click reliably should not rely on subtle shadow cues.

Neumorphism works best as a purely decorative style for dashboards, data displays, and dark-mode widgets where the elements carry no critical interactive role.

Light source consistency

The neumorphic effect simulates a single light source illuminating a surface from one direction - typically top-left. The convention is that light creates a lighter shadow on the top-left of a raised element and a darker shadow on the bottom-right.

If different elements in the same composition use different light angles, the result looks incoherent and physically impossible. Every neumorphic element on a page must share the same light direction to maintain visual consistency.