Neumorphism and Soft UI: The Art of Subtle Shadows

Neumorphism (or soft UI) is a design trend that creates soft, extruded shapes that appear to float above or sink into the background. It's all about creating realistic depth using subtle shadows and highlights. Let's master this elegant design style.

The Anatomy of Neumorphism

Neumorphic elements have three key characteristics:

Basic Neumorphic Button

The foundation of neumorphism is dual box-shadows:

.neuro-button {
  background: #e0e5ec;
  border: none;
  padding: 20px 40px;
  border-radius: 50px;
  box-shadow:
    9px 9px 16px rgba(163, 177, 198, 0.6),
    -9px -9px 16px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}
.neuro-button:hover {
  box-shadow:
    6px 6px 12px rgba(163, 177, 198, 0.6),
    -6px -6px 12px rgba(255, 255, 255, 0.5);
}
.neuro-button:active {
  box-shadow:
    inset 4px 4px 8px rgba(163, 177, 198, 0.6),
    inset -4px -4px 8px rgba(255, 255, 255, 0.5);
}

Pressed/Inset Effect

Create the illusion of pressed buttons or input fields:

.neuro-input {
  background: #e0e5ec;
  border: none;
  padding: 15px 20px;
  border-radius: 15px;
  box-shadow:
    inset 6px 6px 12px rgba(163, 177, 198, 0.5),
    inset -6px -6px 12px rgba(255, 255, 255, 0.5);
}
.neuro-input:focus {
  outline: none;
  box-shadow:
    inset 4px 4px 8px rgba(163, 177, 198, 0.6),
    inset -4px -4px 8px rgba(255, 255, 255, 0.6);
}

Neumorphic Card

Cards are perfect for showcasing neumorphic design:

.neuro-card {
  background: #e0e5ec;
  padding: 30px;
  border-radius: 20px;
  box-shadow:
    12px 12px 24px rgba(163, 177, 198, 0.4),
    -12px -12px 24px rgba(255, 255, 255, 0.4);
}
.neuro-card-inner {
  background: #e0e5ec;
  padding: 20px;
  border-radius: 15px;
  box-shadow:
    inset 3px 3px 6px rgba(163, 177, 198, 0.3),
    inset -3px -3px 6px rgba(255, 255, 255, 0.3);
}

Toggle Switch

Create beautiful neumorphic toggle switches:

.neuro-toggle {
  width: 80px;
  height: 40px;
  background: #e0e5ec;
  border-radius: 40px;
  position: relative;
  box-shadow:
    inset 4px 4px 8px rgba(163, 177, 198, 0.5),
    inset -4px -4px 8px rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}
.neuro-toggle-knob {
  width: 32px;
  height: 32px;
  background: #e0e5ec;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: 4px;
  box-shadow:
    4px 4px 8px rgba(163, 177, 198, 0.6),
    -4px -4px 8px rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
}
.neuro-toggle.active .neuro-toggle-knob {
  left: 44px;
  box-shadow:
    4px 4px 8px rgba(102, 126, 234, 0.4),
    -2px -2px 6px rgba(255, 255, 255, 0.8);
}

Calculating Perfect Shadows

The formula for neumorphic shadows:

Light source position: Top-left (default)

• Dark shadow: Bottom-right, offset = positive X, positive Y
• Light shadow: Top-left, offset = negative X, negative Y

Offset: 5-15px (smaller for subtle, larger for dramatic)
Blur: 2x the offset value
Opacity: 0.15-0.6 (adjust based on background)

Color Palette for Neumorphism

Neumorphism works best with neutral, muted colors:

:root {
  --neuro-light: #e0e5ec;
  --neuro-dark: #a3b1c6;
  --neuro-white: #ffffff;
  --shadow-dark: rgba(163, 177, 198, 0.6);
  --shadow-light: rgba(255, 255, 255, 0.5);
}

Dark Mode Neumorphism

Adapt neumorphism for dark backgrounds:

[data-theme="dark"] {
  --neuro-bg: #2d3142;
  --shadow-dark: rgba(20, 23, 34, 0.8);
  --shadow-light: rgba(77, 82, 102, 0.4);
}
.neuro-dark {
  background: #2d3142;
  box-shadow:
    8px 8px 16px rgba(20, 23, 34, 0.8),
    -8px -8px 16px rgba(77, 82, 102, 0.4);
}

Interactive States

Show feedback with shadow transitions:

.neuro-interactive {
  background: #e0e5ec;
  padding: 20px;
  border-radius: 15px;
  box-shadow:
    8px 8px 16px rgba(163, 177, 198, 0.5),
    -8px -8px 16px rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
  cursor: pointer;
}
.neuro-interactive:hover {
  box-shadow:
    12px 12px 24px rgba(163, 177, 198, 0.5),
    -12px -12px 24px rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}
.neuro-interactive:active {
  box-shadow:
    inset 6px 6px 12px rgba(163, 177, 198, 0.5),
    inset -6px -6px 12px rgba(255, 255, 255, 0.5);
  transform: translateY(0);
}

Accessibility Challenges

Neumorphism has inherent accessibility issues:

Solutions:

.neuro-accessible {
  box-shadow:
    8px 8px 16px rgba(163, 177, 198, 0.6),
    -8px -8px 16px rgba(255, 255, 255, 0.6);
}
.neuro-accessible:focus {
  outline: 3px solid #667eea;
  outline-offset: 4px;
}
.neuro-text {
  color: #4a5568;
  font-weight: 600;
}

When to Use Neumorphism

Good use cases:

• Dashboard cards
• Settings panels
• Music players
• Smart home interfaces
• Minimalist portfolios

• High-density interfaces
• Accessibility-critical applications
• Text-heavy content
• Mobile-first designs (can be hard to see in sunlight)

Best Practices

Conclusion

Neumorphism is a beautiful design trend when used thoughtfully. It creates a tactile, premium feel that users love to interact with. However, always prioritize accessibility and usability over aesthetics. Use neumorphism as an accent, not a foundation.