Night Drive
lo-fiOne surface, no borders — light top-left, shade bottom-right
Neumorphism
Industry-coined trend
Coined in late 2019 (a comment portmanteau of 'new skeuomorphism'), popularized by Michal Malewicz's articles and Alexander Plyuto's Dribbble shots. A trend label, not an academic term.
also called Soft UI, neomorphism, soft neumorphic UI
Neumorphism renders every control as if extruded from, or pressed into, the page itself: background and controls share one matte color, and shape comes entirely from a pair of soft shadows — light from the top-left, dark toward the bottom-right. Nothing has a border and nothing floats; the whole interface reads as one continuous molded surface. It photographs beautifully and tests poorly: the same softness that makes it distinctive erases the contrast real controls need.
Scope: Covers the 2019–2021 'Soft UI' trend look. Its 3D-clay sibling with thicker, toy-like inflation is usually called claymorphism and is a separate (future) entry.
If you called it…
…you meant Neumorphism.
What makes it this — the defining signals
- One continuous surfaceSurface & material
Controls and background share the SAME matte color — elements aren't placed on the page, they're molded from it.
- Dual soft shadowsDepth & light
Every raised element carries two blurred shadows: a light one up-left and a dark one down-right, as if lit from one soft corner light.
- Pressed (inset) statesDepth & light
Inputs and active states invert the shadow pair inward, so the element looks pressed INTO the surface rather than raised from it.
- No borders, whisper contrastGeometry & borders
Edges exist only where the shadows fade — no outlines, no strong fills; the whole UI sits within a narrow band of one hue.
Style brief — paste into your agent
Create the surface using neumorphism (Soft UI). Defining signals: controls share the background's exact matte color; raised elements get dual soft shadows (light top-left, dark bottom-right); pressed/input states invert the shadows inward (inset); no borders anywhere; generous rounded corners. Keep the base hue flexible (classically a pale grey-blue like #e0e5ec) and allow one saturated accent for the primary action. Use CSS box-shadow pairs, e.g. raised: box-shadow: -6px -6px 12px rgba(255,255,255,.85), 6px 6px 12px rgba(163,177,198,.6); pressed: the same pair with inset. Do not drift into skeuomorphism; the decisive difference is that neumorphic surfaces are one uniform material-less matte — no textures, gloss, or imitated materials. Preserve readable text contrast, a visible non-shadow cue for focus and states (WCAG non-text contrast will fail on shadows alone), and reduced-motion support.
Often confused with Skeuomorphism
The same little app, rendered in both styles — only the style changes, so the difference you see IS the difference.
Welcome back
Pick up where you left off.
Neumorphism
Welcome back
Pick up where you left off.
Neumorphism
This is neumorphism because the controls and the background are one material-less matte surface, shaped only by soft dual shadows.
It would become skeuomorphism if surfaces started imitating real nameable materials — leather grain, glossy plastic, brushed metal — with textures and object metaphors.
vs Glassmorphism: This is neumorphism because every element is opaque and shares the background's exact color — depth comes from shadows, not transparency. It would become glassmorphism if panels turned translucent and frosted, letting a colorful backdrop blur through behind them.
Full style DNA
Surface & material
Controls and background share the SAME matte color — elements aren't placed on the page, they're molded from it.
Depth & light
Every raised element carries two blurred shadows: a light one up-left and a dark one down-right, as if lit from one soft corner light.
Inputs and active states invert the shadow pair inward, so the element looks pressed INTO the surface rather than raised from it.
Geometry & borders
Edges exist only where the shadows fade — no outlines, no strong fills; the whole UI sits within a narrow band of one hue.
Large, soft radii everywhere — crisp corners would break the molded illusion.
Color & contrast
Classically a pale grey-blue (#e0e5ec), but the effect works on any light, low-saturation base; one saturated accent may survive for the primary action.
Imagery & ornament
Leather, paper, or gloss would reintroduce skeuomorphism — neumorphic surfaces are matte, uniform, and material-less.
In code — optional starting points
The brief above is framework-neutral; these are concrete handles if your stack matches.
| CSS | background:#e0e5ec; box-shadow:-6px -6px 12px rgba(255,255,255,.85), 6px 6px 12px rgba(163,177,198,.6); border-radius:16px; | Raised element on the classic base hue |
| CSS | box-shadow: inset -4px -4px 8px rgba(255,255,255,.75), inset 4px 4px 8px rgba(163,177,198,.55); | Pressed / input inset state |
Accessibility & misuse
- The style's signature IS a WCAG problem: shadow-only boundaries rarely reach the 3:1 non-text contrast minimum — add a real focus ring and at least one non-shadow state cue (color, icon, label).
- Disabled vs enabled vs pressed all look similar in pure neumorphism; users with low vision may not find the controls at all. NN/g and the coining authors themselves warn against shipping it for functional UI.
- If you keep it, reserve it for large decorative containers and give interactive elements stronger contrast than the style would like.
Origin
A Dribbble-era trend: Alexander Plyuto's 2019 'Skeuomorph Mobile Banking' shots went viral, Jason Kelley's comment coined the name, and Michal Malewicz's 2019–2020 articles defined and then warned about it. It stayed mostly a concept-shot style — few shipping products survived its accessibility costs.