Neumorphism CSS Guide: How to Build Soft UI CSS Components

Neumorphism css — also called soft UI css or neumorphic design — is a design style that makes elements appear to be extruded from or pressed into the background surface. Unlike glassmorphism (which uses blur and transparency), neumorphism achieves depth using only background color and two carefully calculated box-shadows. This guide covers the full technique, all major variants, and the accessibility tradeoffs you must consider.

What Is Neumorphism?

Coined in 2019, neumorphism (a portmanteau of “new” and “skeuomorphism”) creates the illusion of physical objects by simulating how light falls on a raised or sunken surface. It became popular with UI kits that demonstrated soft, tactile-looking button panels.

The key visual characteristics of soft ui css are:

• Monochromatic palette — elements use the same color as the background, avoiding high contrast
• Two shadows — one light (simulating a top-left light source) and one dark (the shadow cast opposite)
• No borders — depth comes entirely from shadows, not outlines
• Rounded corners — soft edges reinforce the “extruded from material” feel

The Dual Shadow Technique

The heart of neumorphism css is two box-shadow values: a light shadow on the top-left, and a dark shadow on the bottom-right.

.neumorphic {
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow:
    6px 6px 12px #b8bec7,    /* dark shadow — bottom-right */
    -6px -6px 12px #ffffff;  /* light shadow — top-left */
}

The light and dark shadow colors must be derived from the background color. This is the most critical step in neumorphic design.

Color Math for Neumorphic Shadows

Given a background color, the formula is:

• Dark shadow — darken the background by 10–15%
• Light shadow — lighten the background by 10–15%

For #e0e5ec:

You can also express shadows using rgba relative to black and white:

.neumorphic {
  background: #e0e5ec;
  box-shadow:
    6px 6px 14px rgba(0, 0, 0, 0.15),
    -6px -6px 14px rgba(255, 255, 255, 0.8);
}

This approach works across any background color, making it easier to theme.

The Four Neumorphic Variants

Flat (Default Raised)

The standard raised look — element appears to sit above the surface:

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

Pressed (Active / Toggled On)

The element appears pushed into the surface. Use this for active/toggled states:

.pressed {
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow:
    inset 6px 6px 12px #b8bec7,
    inset -6px -6px 12px #ffffff;
}

The only change is adding inset to both shadows — this pushes the depth inward.

Concave

The element surface curves inward, like a bowl:

.concave {
  background: linear-gradient(145deg, #d1d9e6, #f0f4fa);
  border-radius: 12px;
  box-shadow:
    6px 6px 12px #b8bec7,
    -6px -6px 12px #ffffff;
}

The gradient goes from darker (top-left) to lighter (bottom-right), simulating a concave surface.

Convex

The surface curves outward, like a dome:

.convex {
  background: linear-gradient(145deg, #f0f4fa, #d1d9e6);
  border-radius: 12px;
  box-shadow:
    6px 6px 12px #b8bec7,
    -6px -6px 12px #ffffff;
}

The gradient is reversed — lighter top-left, darker bottom-right.

Complete Working Example

Here is a full neumorphic design panel with a button in raised and pressed states:

<div class="neo-panel">
  <h3>Volume</h3>
  <button class="neo-btn">Play</button>
  <button class="neo-btn neo-btn--pressed">Pause</button>
</div>

body {
  background: #e0e5ec;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, sans-serif;
}

/* Container */
.neo-panel {
  padding: 2.5rem;
  border-radius: 20px;
  background: #e0e5ec;
  box-shadow:
    10px 10px 20px #b8bec7,
    -10px -10px 20px #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.neo-panel h3 {
  color: #6b7a8d;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

/* Raised button */
.neo-btn {
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 10px;
  background: #e0e5ec;
  color: #4a5568;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow:
    5px 5px 10px #b8bec7,
    -5px -5px 10px #ffffff;
  transition: box-shadow 0.15s;
}

/* Pressed / active button */
.neo-btn--pressed,
.neo-btn:active {
  box-shadow:
    inset 5px 5px 10px #b8bec7,
    inset -5px -5px 10px #ffffff;
  color: #6366f1;
}

Shadow Offset and Blur Sizing Guide

The relationship between shadow offset and blur radius affects how dramatic the effect feels:

A common mistake is using a large offset with a small blur — this creates an unrealistic sharp shadow that breaks the illusion.

Accessibility Problems with Neumorphic Design

Neumorphism css has a well-documented accessibility problem: low contrast. Because elements share the same base color as the background and have no visible borders, users with low vision, color blindness, or in poor lighting conditions struggle to identify interactive elements.

Specific issues:

• Buttons are indistinguishable from decorative panels — both use the same background and similar shadows
• Focus indicators are nearly invisible — the standard focus ring is hidden by monochromatic design
• Pressed/unpressed states lack sufficient differentiation — users cannot tell if an action succeeded

Mitigation Strategies

/* High-contrast focus indicator */
.neo-btn:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 3px;
}

/* Add color to active/toggled states */
.neo-btn--active {
  color: #6366f1;
  font-weight: 700;
}

Always run neumorphic designs through a contrast checker, especially for text on the neumorphic background.

When to Use (and Avoid) Neumorphism

Good use cases:

• Internal dashboards where users are familiar with the interface
• Music players, device control UIs, and tactile-style apps
• Decorative components where accessibility is less critical (e.g., clock faces)

Avoid neumorphism for:

• Primary navigation and core conversion CTAs
• Forms with many interactive elements
• Any context where users may have low vision or use assistive technology

Summary

Neumorphism css achieves its signature soft ui css effect through one elegant trick: two box-shadows, one light and one dark, derived mathematically from the background color. The flat, pressed, concave, and convex variants let you simulate physical interaction states with CSS alone. Use neumorphic design selectively — it is visually beautiful but carries real accessibility risks when applied broadly.

Use our free CSS Neumorphism Generator to calculate perfect shadow colors automatically and preview all four variants with your chosen base color.