Neumorphism Design Guide: CSS Implementation, Accessibility & 2026 UI Trends

Master soft UI design with practical CSS techniques, accessibility solutions, and a look at how neumorphism is evolving in modern interface design.

Neumorphism (also called "soft UI" or "new skeuomorphism") emerged as one of the most distinctive design trends of the early 2020s. By combining carefully crafted shadows against a matching background, it creates interfaces that feel tactile, physical, and almost three-dimensional — like pushing buttons on a real device. While the trend has evolved and adapted since its initial explosion on Dribbble, understanding neumorphism principles remains valuable for designers and developers working on modern interfaces, particularly in dark mode, health and wellness apps, and IoT dashboards.

What Is Neumorphism?

Neumorphism is a design approach that creates soft, extruded UI elements by applying dual box-shadows to elements positioned against a background of the same color. Unlike flat design (which eliminates shadows entirely) or traditional material design (which uses clearly separated layers), neumorphism makes elements appear to emerge from or press into the surface itself.

The technique takes inspiration from physical, real-world interfaces — think of the soft, rubberized buttons on a modern remote control or the raised sections on a high-end appliance. The visual effect is achieved entirely through CSS, with no images or complex shapes required.

The Three Core Principles

1. Monochromatic palette: The element background and page background share the same base color. All visual distinction comes from shadows.
2. Dual shadow system: One shadow is light (simulating a light source from the top-left) and one is dark (creating depth on the bottom-right). Together they produce the illusion of dimensionality.
3. Subtle depth: Unlike drop shadows in material design, neumorphic shadows are soft, wide, and low-contrast. The effect should be felt rather than loudly seen.

CSS Implementation: The Core Technique

The entire neumorphic effect relies on a single CSS property: box-shadow. The magic is in using two shadows — one offset toward the light source and one away from it — both with large blur radii to create a soft, diffused appearance.

Raised (Convex) Element

A raised element appears to push out from the surface:

.neu-raised {
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow: 8px 8px 16px #b8bec7,
             -8px -8px 16px #ffffff;
  padding: 20px 40px;
  color: #555;
}

Pressed (Concave) Element

A pressed element appears to be pushed into the surface:

.neu-pressed {
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow: inset 4px 4px 8px #b8bec7,
             inset -4px -4px 8px #ffffff;
  padding: 20px 40px;
  color: #555;
}

Neumorphic Button with Active State

.neu-btn {
  background: #e0e5ec;
  border: none;
  border-radius: 12px;
  padding: 12px 32px;
  box-shadow: 6px 6px 12px #b8bec7,
             -6px -6px 12px #ffffff;
  color: #555;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.neu-btn:active {
  box-shadow: inset 4px 4px 8px #b8bec7,
             inset -4px -4px 8px #ffffff;
}

Dark Mode Neumorphism

Neumorphism works beautifully in dark mode — in fact, many designers argue it looks even better with dark backgrounds because the subtle shadows create a more dramatic sense of depth.

.neu-dark {
  background: #1e293b;
  border-radius: 16px;
  box-shadow: 8px 8px 16px #151d2e,
             -8px -8px 16px #273548;
  padding: 24px;
  color: #e2e8f0;
}

.neu-dark-pressed {
  box-shadow: inset 4px 4px 8px #151d2e,
             inset -4px -4px 8px #273548;
}

Building a Complete Neumorphic Component Library

Neumorphic Card

.neu-card {
  background: #e0e5ec;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 10px 10px 20px #b8bec7,
             -10px -10px 20px #ffffff;
  max-width: 320px;
}

.neu-card h3 {
  color: #4a5568;
  margin-bottom: 8px;
}

.neu-card p {
  color: #718096;
  line-height: 1.6;
}

Neumorphic Toggle Switch

.neu-toggle-track {
  width: 56px;
  height: 28px;
  background: #e0e5ec;
  border-radius: 14px;
  box-shadow: inset 3px 3px 6px #b8bec7,
             inset -3px -3px 6px #ffffff;
  position: relative;
  cursor: pointer;
}

.neu-toggle-thumb {
  width: 22px;
  height: 22px;
  background: #e0e5ec;
  border-radius: 50%;
  box-shadow: 3px 3px 6px #b8bec7,
             -3px -3px 6px #ffffff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform 0.3s ease;
}

.neu-toggle-track.active .neu-toggle-thumb {
  transform: translateX(28px);
}

Neumorphic Progress Bar

.neu-progress {
  width: 100%;
  height: 8px;
  background: #e0e5ec;
  border-radius: 4px;
  box-shadow: inset 2px 2px 4px #b8bec7,
             inset -2px -2px 4px #ffffff;
  overflow: hidden;
}

.neu-progress-fill {
  height: 100%;
  width: 65%;
  background: linear-gradient(90deg, #6366f1, #818cf8);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}

Accessibility: The Critical Challenge

Neumorphism's biggest criticism — and the reason it fell out of mainstream favor — is its accessibility problems. The low-contrast shadows that create the soft aesthetic also make it difficult for many users to perceive interactive elements, distinguish boundaries, and navigate interfaces effectively.

Common Accessibility Issues

• Low contrast between element and background: When both share the same color, users with low vision may not perceive the element boundary
• Unclear interactive states: Subtle shadow changes between default, hover, and active states may not be noticeable to all users
• Focus indicator absence: Without visible outlines, keyboard users cannot see which element has focus
• Color-only distinction: Relying solely on shadow for state changes does not work for users with visual impairments

Making Neumorphism Accessible

Neumorphism in 2026: Evolution, Not Extinction

Pure neumorphism — entire interfaces built from matching backgrounds and dual shadows — has largely been abandoned by major product teams. However, the aesthetic principles have evolved and found new life in several forms:

Soft UI with Borders

The most practical evolution adds subtle borders to neumorphic elements. This solves the primary accessibility issue (unclear boundaries) while preserving the soft, tactile feel. Apple's watchOS widgets and several meditation apps use this approach.

Hybrid Neumorphism

Modern designers increasingly combine neumorphic elements with other styles. A dashboard might use neumorphic cards on a dark background alongside flat typography and glassmorphic overlays. The key is selective application — use neumorphic shadows for specific components (toggles, sliders, metric cards) rather than building the entire UI in the style.

Dark Mode Dominance

Neumorphism has found its strongest niche in dark mode interfaces. The contrast between dark shadows and slightly lighter highlights reads more naturally in dark environments, and the overall aesthetic pairs well with the ambient lighting that dark mode implies. IoT dashboards, music players, and health tracking apps frequently use dark neumorphism in 2026.

Micro-Interactions

Neumorphism excels at micro-interactions. The transition from raised to pressed state when clicking a button provides satisfying, tactile feedback that flat design cannot match. When combined with haptic feedback on mobile devices, the effect is genuinely delightful.

When to Use Neumorphism (and When to Avoid It)

Great Use Cases

• Music and media player interfaces (toggles, sliders, playback controls)
• Health, fitness, and meditation apps (calm, tactile aesthetic)
• Smart home and IoT dashboards (physical device metaphor)
• Watch faces and wearable interfaces (small, focused component sets)
• Portfolio or personal sites where the aesthetic is intentional

Poor Use Cases

• Data-heavy enterprise dashboards (clarity trumps aesthetics)
• E-commerce checkout flows (any confusion costs sales)
• Government or public service websites (accessibility is mandatory)
• Forms with many fields (boundaries must be unmistakable)
• Mobile apps used outdoors (shadows invisible in bright sunlight)

Performance Considerations

Box-shadows are generally GPU-accelerated in modern browsers, so neumorphic elements perform well. However, keep these considerations in mind:

• Large blur radii (20px+) can be expensive on lower-end mobile devices — test on budget phones
• Multiple layered shadows compound rendering cost — keep it to two shadows per element
• Avoid animating box-shadow — use transform and opacity transitions instead for better performance
• Use will-change: transform sparingly on elements that will animate frequently

Related Tools

Frequently Asked Questions

Published on April 10, 2026 · Last updated April 10, 2026 · 10 min read