Neumorphism creates the illusion of elements extruding from or recessing into the background, as if shaped from a single sheet of soft material. Pure shadow. Zero borders. Tactile depth.
Neumorphism (also called Soft UI or Neo-skeuomorphism) is a UI design aesthetic that creates the illusion of elements extruding from or recessing into the background surface, as if molded from a single sheet of soft material. The effect is achieved through carefully paired light and dark shadows on elements that share the same color as their parent background, producing a subtle, tactile dimensionality that sits between flat design and full skeuomorphism.
Coined by designer Jason Kelley and popularized by Alexander Plyuto's Dribbble explorations in late 2019, the style evokes extruded plastic, embossed paper, or molded rubber -- surfaces that feel physically continuous rather than layered.
The defining visual traits that make neumorphism instantly recognizable.
UI elements appear to push outward from the background rather than floating above it. Element and background are visually part of the same continuous material.
Every raised element uses two box-shadows: a dark shadow on one side and a light shadow on the opposite, simulating a single consistent light source.
Elements share the same background color as their parent container. Color differentiation is minimal; depth is conveyed through shadow alone.
Generous border-radius values are essential. Sharp edges are nearly absent, reinforcing the soft, molded material metaphor throughout the interface.
The entire interface operates at deliberately low contrast ratios. Visual hierarchy comes from shadow depth rather than color variation.
Interactive elements use inset (concave) shadows to communicate pressed or active states, creating a satisfying dented-into-the-surface effect.
Shadow is the only tool for creating depth and hierarchy. Click to toggle states.
Functional neumorphic components demonstrating raised, pressed, and active states.
Inherently monochromatic. The entire palette derives from a single background hue with computed shadow variants.
Clean, rounded sans-serifs that match the soft, molded surfaces. Highly legible at medium to semi-bold weights.
Geometric headings with humanist body text create a balanced, approachable interface.
Rounded terminals in the heading font reinforce the soft material metaphor throughout.
A single-family approach that relies on weight contrast for hierarchy. Simple and elegant.
The foundational rules that preserve the neumorphic illusion across an entire interface.
The background color is everything. Every element derives its color from the background. If element and parent differ, the extrusion illusion breaks immediately.
Shadow is the only tool for creating depth and hierarchy. Never rely on color contrast alone. Small versus large shadows establish the visual pecking order.
Maintain a single, consistent light source direction across the entire interface. Top-left is most common. Mixed light directions break the physical coherence.
Keep depth levels limited: raised, flat, and recessed. Raised elements use outset shadows; pressed or active elements use inset shadows. More levels create visual confusion.
Use accent colors sparingly and only for interactive highlights. In a monochromatic system, even a small splash of color draws heavy attention.
Generous padding and spacing are critical. Cramped layouts undermine the soft, breathable aesthetic. Elements should never touch or overlap.
A neumorphic element without both a dark and light shadow looks like a plain drop shadow. Both are mandatory for the extrusion effect.
Avoid pure white or pure black backgrounds. The effect works best on muted, mid-light tones where both shadow directions are clearly visible.
Low contrast is the biggest limitation. Ensure text meets WCAG AA ratios (4.5:1 for body text). Consider offering a high-contrast mode.
Box-shadow with multiple values is well-optimized, but avoid animating blur values directly. Transition box-shadow as a whole property instead.
In dark mode, the light shadow becomes a slightly lighter shade (not white), and the dark shadow becomes slightly darker. The contrast range shrinks significantly.
Keep shadow offsets proportional: buttons use 3-6px, cards use 6-10px, panels use 10-15px. Blur should be 1.5-2x the offset distance.