How Neumorphism Works
The effect requires a flat background, and two box-shadows: one lighter than the background (simulating light source) and one darker (simulating shadow). The element appears to float above the surface. To create a pressed state, you flip the shadows to inset.
The Core Formula
/*
Rule: shadow colors are tints/shades of the background.
Background: #e0e5ec
Light shadow: lighten ~10% → #ffffff (or near-white)
Dark shadow: darken ~10% → #a3b1c6
*/
/* Light neumorphic card */
.neu-card {
background: #e0e5ec;
border-radius: 20px;
box-shadow:
8px 8px 16px #a3b1c6, /* dark shadow, bottom-right */
-8px -8px 16px #ffffff; /* light shadow, top-left */
}
/* Pressed / active state */
.neu-card:active,
.neu-card.pressed {
box-shadow:
inset 8px 8px 16px #a3b1c6,
inset -8px -8px 16px #ffffff;
}
/* Soft button */
.neu-button {
background: #e0e5ec;
border: none;
border-radius: 12px;
padding: 12px 24px;
cursor: pointer;
box-shadow:
6px 6px 12px #a3b1c6,
-6px -6px 12px #ffffff;
transition: box-shadow 0.15s ease;
}
.neu-button:hover {
box-shadow:
4px 4px 8px #a3b1c6,
-4px -4px 8px #ffffff;
}
.neu-button:active {
box-shadow:
inset 4px 4px 8px #a3b1c6,
inset -4px -4px 8px #ffffff;
}Dark Mode Neumorphism
Dark neumorphism needs a mid-tone dark background (not pure black). Pure black has no room for a darker shadow. A dark gray like #1e2430 works well.
/* Dark neumorphic surface */
.neu-dark {
background: #1e2430;
border-radius: 20px;
box-shadow:
8px 8px 16px #131820, /* darker shade */
-8px -8px 16px #293040; /* lighter shade */
}
/* Dark pressed */
.neu-dark.pressed {
box-shadow:
inset 6px 6px 12px #131820,
inset -6px -6px 12px #293040;
}
/* Concave (sunken) form */
.neu-dark-concave {
background: linear-gradient(145deg, #1a202c, #232b38);
box-shadow:
8px 8px 16px #131820,
-8px -8px 16px #293040;
}Neumorphic Form Elements
/* Text input */
.neu-input {
background: #e0e5ec;
border: none;
border-radius: 10px;
padding: 12px 16px;
outline: none;
box-shadow:
inset 4px 4px 8px #a3b1c6,
inset -4px -4px 8px #ffffff;
color: #444;
font-size: 1rem;
}
.neu-input:focus {
box-shadow:
inset 4px 4px 8px #a3b1c6,
inset -4px -4px 8px #ffffff,
0 0 0 2px rgba(124, 111, 255, 0.4); /* accessible focus ring */
}
/* Toggle switch */
.neu-toggle {
width: 56px;
height: 28px;
border-radius: 14px;
background: #e0e5ec;
box-shadow:
inset 3px 3px 6px #a3b1c6,
inset -3px -3px 6px #ffffff;
position: relative;
}
.neu-toggle .thumb {
width: 22px; height: 22px;
border-radius: 50%;
background: #e0e5ec;
box-shadow: 2px 2px 4px #a3b1c6, -2px -2px 4px #ffffff;
position: absolute;
top: 3px; left: 3px;
transition: transform 0.2s ease;
}
.neu-toggle.on .thumb {
transform: translateX(28px);
background: #7c6fff;
box-shadow: 2px 2px 4px rgba(124,111,255,0.4);
}CSS Variables for Consistent Neumorphism
Centralizing shadow values in CSS custom properties makes the system easy to maintain and switch between light/dark themes.
:root {
--neu-bg: #e0e5ec;
--neu-shadow-dark: #a3b1c6;
--neu-shadow-light: #ffffff;
--neu-radius: 16px;
--neu-offset: 8px;
--neu-blur: 16px;
}
.neu {
background: var(--neu-bg);
border-radius: var(--neu-radius);
box-shadow:
var(--neu-offset) var(--neu-offset) var(--neu-blur) var(--neu-shadow-dark),
calc(-1 * var(--neu-offset)) calc(-1 * var(--neu-offset)) var(--neu-blur) var(--neu-shadow-light);
}
[data-theme="dark"] {
--neu-bg: #1e2430;
--neu-shadow-dark: #131820;
--neu-shadow-light: #293040;
}Accessibility Warning
Neumorphism has a known accessibility problem: low contrast. Because the interactive elements use the same background color as the surface (with only shadow variation), they can be nearly invisible to users with low vision.
WCAG 2.1 requires 3:1 contrast ratio for UI components (e.g., buttons) against adjacent colors. Pure neumorphic buttons typically fail this test.
Recommended mitigation: add a subtle border on interactive elements (border: 1px solid rgba(0,0,0,0.08)), ensure focus states are clearly visible with a colored outline, and consider adding color accents to active/selected states.
When to Use (and When to Avoid) Neumorphism
- Use for: dashboards, music players, smart home UIs, wearable app mockups — contexts where a tactile, physical feel is desirable.
- Avoid for: data-heavy interfaces (contrast is needed), accessibility-critical apps, high-information-density UIs.
- Never use on: disabled states (already low contrast), placeholder text, or pure decorative elements with no interaction.
- Best pairing: combine neumorphism with a pop of accent color (purple, teal) to provide contrast anchors for interactive elements.
Frequently Asked Questions
- What background color works best for neumorphism?
- Mid-tone grays in the #d0d8e8 – #e8ecf4 range work best for light mode. Avoid pure white (no room for lighter shadow) or pure black (no room for darker shadow). The background needs to sit in the middle of the lightness scale.
- How do I calculate the shadow colors?
- Take your background hex color and create one version 10-15% lighter (light shadow) and one 10-15% darker (dark shadow). Tools like CSS Neumorphism Generator (neumorphism.io) can do this calculation automatically.
- Is neumorphism still a trend in 2026?
- Neumorphism peaked around 2020-2021. It's now used selectively — mostly for specific UI components (toggles, sliders, audio players) rather than entire interfaces. Glassmorphism has largely replaced it as the dominant 'decorative' trend.
- Can I combine glassmorphism and neumorphism?
- Yes — 'claymorphism' and hybrid approaches combine translucent glass backgrounds with soft extruded shadows. The key is to maintain contrast for accessibility regardless of which aesthetic you use.