Neumorphism Design Guide: How to Create Soft UI with CSS

# Neumorphism Design Guide: How to Create Soft UI with CSS

Neumorphism (also called soft UI) creates interface elements that appear to extrude from or press into the background surface. It combines the visual depth of skeuomorphism with the cleanliness of flat design, producing soft, realistic-looking components using only CSS shadows. This guide covers the technique, when to use it, and important accessibility considerations.

What Is Neumorphism?

Neumorphism is a visual design style where elements look like they're part of the background surface — pushed out or pressed in, rather than floating above it. The effect is achieved using two box shadows: a light shadow on one side and a dark shadow on the other, simulating a light source.

The name comes from "new" + "skeuomorphism," combining modern minimalism with subtle 3D depth cues.

How Neumorphism Works in CSS

The Two-Shadow Technique

Every neumorphic element uses two box shadows:

A light shadow (lighter than the background) on the top-left

A dark shadow (darker than the background) on the bottom-right

This simulates light hitting the surface from the top-left corner.

Basic Raised Element

.neumorphic {
  background: #e0e5ec;
  border-radius: 20px;
  box-shadow:
    8px 8px 16px #b8bec7,
    -8px -8px 16px #ffffff;
}

The background color must match the parent container's background. This is what makes the element look like it's part of the same surface.

Pressed (Inset) Element

.neumorphic-pressed {
  background: #e0e5ec;
  border-radius: 20px;
  box-shadow:
    inset 8px 8px 16px #b8bec7,
    inset -8px -8px 16px #ffffff;
}

The `inset` keyword reverses the shadows, making the element appear pressed into the surface.

Interactive Button

.neumorphic-button {
  background: #e0e5ec;
  border: none;
  border-radius: 15px;
  padding: 15px 30px;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  box-shadow:
    6px 6px 12px #b8bec7,
    -6px -6px 12px #ffffff;
  transition: box-shadow 0.2s ease;
}

.neumorphic-button:hover {
  box-shadow:
    4px 4px 8px #b8bec7,
    -4px -4px 8px #ffffff;
}

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

When clicked, the button transitions from raised to pressed, creating a satisfying tactile feedback.

Neumorphic Components

Card Component

.neumorphic-card {
  background: #e0e5ec;
  border-radius: 25px;
  padding: 30px;
  box-shadow:
    10px 10px 20px #b8bec7,
    -10px -10px 20px #ffffff;
}

.neumorphic-card h3 {
  color: #333;
  margin-bottom: 10px;
}

.neumorphic-card p {
  color: #777;
  line-height: 1.6;
}

Input Field

.neumorphic-input {
  background: #e0e5ec;
  border: none;
  border-radius: 12px;
  padding: 15px 20px;
  font-size: 16px;
  color: #333;
  box-shadow:
    inset 4px 4px 8px #b8bec7,
    inset -4px -4px 8px #ffffff;
  outline: none;
}

.neumorphic-input:focus {
  box-shadow:
    inset 6px 6px 12px #b8bec7,
    inset -6px -6px 12px #ffffff;
}

Input fields use the inset shadow to appear recessed, as if carved into the surface.

Toggle Switch

.neumorphic-toggle {
  width: 60px;
  height: 30px;
  background: #e0e5ec;
  border-radius: 15px;
  position: relative;
  cursor: pointer;
  box-shadow:
    inset 4px 4px 8px #b8bec7,
    inset -4px -4px 8px #ffffff;
}

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

.neumorphic-toggle.active .knob {
  left: 32px;
}

Progress Bar

.neumorphic-progress {
  background: #e0e5ec;
  border-radius: 10px;
  height: 20px;
  box-shadow:
    inset 3px 3px 6px #b8bec7,
    inset -3px -3px 6px #ffffff;
  overflow: hidden;
}

.neumorphic-progress .fill {
  height: 100%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 10px;
  box-shadow:
    2px 2px 4px rgba(0,0,0,0.1);
}

Color Rules for Neumorphism

The Background Matching Rule

The most important rule: the element's background must match its parent's background. The illusion breaks completely if backgrounds don't match.

Choosing the Right Base Color

Neumorphism works best with muted, desaturated colors:

Base Color	Light Shadow	Dark Shadow
#e0e5ec (gray)	#ffffff	#b8bec7
#d1d9e6 (cool gray)	#f0f5fc	#b2bad0
#e8ddd3 (warm beige)	#fef5ec	#c9c0b7
#d4e4dc (soft green)	#eefff6	#bacac2

How to calculate shadow colors:

Light shadow: Lighten the base color by 15-20%

Dark shadow: Darken the base color by 15-20%

Colors That Don't Work

Pure white (#ffffff): - No room to create a lighter shadow

Very dark colors: - Shadows become invisible

Highly saturated colors: - The effect looks unnatural

Multiple different background colors: - Breaks the single-surface illusion

When to Use Neumorphism

Good Use Cases

Calculator apps - — Buttons naturally benefit from the pressed/raised effect

Music player controls - — Play/pause buttons, volume sliders

Settings pages - — Toggle switches and sliders

Dashboard widgets - — Cards displaying metrics or stats

Personal projects and portfolios - — Showcases design skill

Bad Use Cases

Text-heavy pages - — Neumorphism adds visual noise that competes with content

E-commerce - — Users need clear visual hierarchy and CTAs

Complex forms - — Too many inset inputs become visually confusing

Accessibility-critical applications - — Low contrast is inherent to the style

High-information-density interfaces - — The soft shadows need space to breathe

Accessibility Concerns

Low Contrast Problem

Neumorphism relies on subtle shadow differences on a uniform background. This creates an inherent accessibility problem: the contrast between elements and their background is often too low for users with visual impairments.

WCAG requirements:

Non-text elements need a 3:1 contrast ratio with adjacent colors

Many neumorphic designs fail this requirement

How to Improve Accessibility

Add subtle borders - — A thin border (1px solid rgba(0,0,0,0.1)) improves element visibility without breaking the aesthetic

Increase shadow intensity - — Stronger shadows create more visible depth

Use color accents for active states - — Add color to focused/active elements instead of relying solely on shadow changes

Add focus indicators - — Keyboard focus must be clearly visible

Test with contrast checkers - — Verify your design meets WCAG AA standards

Example with Accessibility Improvements

.neumorphic-accessible {
  background: #e0e5ec;
  border-radius: 15px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    8px 8px 16px #b8bec7,
    -8px -8px 16px #ffffff;
}

.neumorphic-accessible:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

Neumorphism vs. Other Design Trends

Aspect	Flat Design	Material Design	Glassmorphism	Neumorphism
Depth	None	Elevation layers	Blur + transparency	Shadow-based depth
Shadows	None or minimal	Directional shadows	Blur/frost	Dual opposing shadows
Backgrounds	Any color	Any color	Transparent + blur	Must match parent
Accessibility	Best	Good	Moderate	Challenging
Performance	Best	Good	GPU-intensive (blur)	Good
Best for	Content-heavy sites	Apps and dashboards	Overlays and cards	UI controls and accents

Free Design Tools

Create neumorphic designs with these free Tovlix tools:

Neumorphism Generator - Visual neumorphism CSS generator

Box Shadow Generator - Custom CSS shadow effects

CSS Gradient Generator - Background gradients for accents

Border Radius Generator - Rounded corner controls

Color Palette Generator - Find the right base colors

Color Converter - Convert between HEX, RGB, and HSL

Conclusion

Neumorphism creates a distinctive soft UI aesthetic using dual CSS box shadows on matching backgrounds. It works best for interactive controls like buttons, toggles, and sliders — not for entire page layouts. Always address accessibility by adding subtle borders and ensuring adequate contrast. Use our free Neumorphism Generator to visually design neumorphic elements and copy the CSS code directly into your project.