What Is Neumorphism?
Neumorphism (a portmanteau of 'new' and 'skeuomorphism') is a design style that creates soft, extruded shapes using carefully crafted inner and outer shadows on a uniform background. Elements appear to be pushed out of or pressed into the surface, as if the entire UI is carved from a single material — usually a soft gray or muted pastel.
The style went viral in late 2019 after designer Alexander Plyuto published neumorphic UI concepts on Dribbble. For a brief moment, it felt like the next big thing. Then reality set in.
Key Principles
1. Soft Shadows, Two Directions
Every element uses two shadows: a light one (top-left, simulating light source) and a dark one (bottom-right, simulating shadow). This dual-shadow technique creates the illusion of depth without hard edges.
2. Monochromatic Surfaces
The background and the elements share the same base color. Only shadow and light differentiate foreground from background, creating a uniform, sculpted look.
3. Subtle Depth, No Hard Edges
Everything is soft. No borders, no hard color transitions. Elements emerge gently from the surface, creating a tactile, almost physical quality.
4. Minimal Color Variation
Color is used very sparingly — usually just for active states or accent elements. The palette is predominantly neutral with one or two highlights.
History & Origins
Neumorphism emerged as a reaction to the flatness that had dominated since iOS 7 (2013). Designers yearned for depth and materiality without returning to full skeuomorphism. The style bridges flat design and skeuomorphism, taking the clean simplicity of flat and adding just enough physical metaphor to create visual interest. However, the concept stayed mostly in the realm of design mockups rather than production interfaces.
Modern UI Applications & Examples
- Dribbble/Behance showcases — Neumorphism thrived as a concept on design portfolio sites, with thousands of beautiful mockups that were never built.
- Samsung One UI — Some elements of Samsung's interface (particularly clock and calculator widgets) flirted with neumorphic aesthetics.
- Smart home interfaces — The soft, tactile quality of neumorphism appeared in some smart home dashboard concepts.
- In production? Very few mainstream products adopted it wholesale due to the accessibility concerns described below.
When to Use It
Neumorphism can work in small doses — a single feature element, a music player widget, or a toggle switch. It's effective for personal projects, experimental interfaces, or embedded components where the neumorphic element is a focal point, not the entire UI.
When Not To
Almost everywhere else. The fundamental problem: neumorphism's low contrast makes elements hard to distinguish from backgrounds, buttons hard to identify as interactive, and pressed/unpressed states nearly indistinguishable. It fails WCAG contrast requirements in most implementations and is particularly problematic for users with low vision.
How to Apply It (Carefully)
- Use it sparingly — accent components, not entire pages
- Always maintain WCAG-compliant text contrast
- Add subtle color or border indicators for interactive states
- Test with accessibility tools before shipping
- Consider it decorative, not structural
/* Neumorphic element */
.neu-card {
background: #e0e0e0;
border-radius: 16px;
padding: 2rem;
box-shadow:
8px 8px 16px #bebebe,
-8px -8px 16px #ffffff;
}
/* Neumorphic pressed/inset state */
.neu-card-inset {
background: #e0e0e0;
border-radius: 16px;
padding: 2rem;
box-shadow:
inset 4px 4px 8px #bebebe,
inset -4px -4px 8px #ffffff;
}
Related Styles
See also: Skeuomorphism, Glassmorphism, Flat Design, Material Design