What is Neumorphism?
Neumorphism (neomorphism or Soft UI) is a design style that creates tactile 3D-like elements using dual box-shadows of the same background color. Light shadow top-left, dark shadow bottom-right — creating the illusion that elements are extruded from the surface itself.
Unlike flat UI or glassmorphism, neumorphism doesn't use transparency or vibrant colors. It relies on the same base color with subtle light/dark shadow pairs for a minimalist plastic or clay-like appearance.
Frequently Asked Questions
Neumorphism is a UI design style that extrudes elements from their background using dual box-shadows — a light shadow on one side and a dark shadow on the opposite side. Unlike skeuomorphism, it doesn't use realistic textures. Unlike flat design, it creates depth. The result is a soft, tactile appearance popular in 2020-2022.
Use a medium-lightness base color (e.g., #e0e5ec). Auto-generate light/dark variants: lighten the color by 10-15% for the light shadow, darken by 10-15% for the dark shadow. Pure white or black won't work. Pastel blues, grays, and warm neutrals work best.
These are the four neumorphism shape variants: Flat = standard dual shadow (default); Concave = inward curved with a darker center using radial gradient; Convex = outward curved with a lighter center using radial gradient; Pressed = inverted shadows to simulate a pressed button state.
Neumorphism peaked in 2020-2021. It remains popular as an accent style for specific UI components (cards, toggles, knobs) but is less common as a full design system due to accessibility concerns. Many designers now blend it with glassmorphism or use it sparingly for interactive controls.
Neumorphism creates a premium, tactile feel for dashboards, control panels, music players, and settings screens. It works particularly well for physical controls like knobs, sliders, and buttons where the raised/pressed visual matches the interaction metaphor. Use it thoughtfully with WCAG contrast in mind.