Soft 3D Shadows for Embossed Interfaces
This card appears to be gently pressed into or raised from the background, creating a tactile, almost physical quality on a flat screen.
Neumorphism (a blend of "new" and "skeuomorphism") combines 3D elements with soft shadows and subtle highlights to create an "embossed" or "pressed" look. It uses light shadows for raised elements and dark shadows for inset ones, often on a matching background for a seamless feel.
Analogy: Imagine buttons that look like they're gently pressed into soft clay—raised edges catch light, inset areas feel recessed, giving a tactile, almost physical quality to flat screens.
Coined by: Designer Alexander Plyuto in 2020
First notable example: Skeuomorph Mobile Banking concept on Dribbble
Design lineage: Draws from skeuomorphism (realistic designs mimicking physical objects) but softens it for modern, minimalist interfaces
Current status: Gained traction in 2020 as a "next step" after flat design, often paired with glassmorphism for layered, futuristic UIs
Neumorphism relies on carefully crafted box-shadows with both light and dark shadows:
/* Raised/Embossed Effect */
.neumorphic-btn {
background: #e0e0e0;
border-radius: 20px;
padding: 15px 30px;
/* Two shadows: dark (bottom-right) + light (top-left) */
box-shadow:
8px 8px 15px #bebebe, /* Dark shadow */
-8px -8px 15px #ffffff; /* Light shadow */
}
/* Pressed/Inset Effect (when active) */
.neumorphic-btn:active {
/* Inset shadows reverse the effect */
box-shadow:
inset 8px 8px 15px #bebebe,
inset -8px -8px 15px #ffffff;
}
Appears to come forward
Subtle depth
Appears pushed in
Neumorphism's main challenge is accessibility. The subtle shadows and low contrast can make elements difficult to distinguish for users with:
A modern trend is combining neumorphism with glassmorphism to create hybrid effects: translucent raised cards with soft shadows. This can add extra depth while maintaining the tactile quality of neumorphism.