Neumorphism (also called Soft UI or Neu-skeuomorphism) is a UI design trend that blends flat design with skeuomorphism. Elements appear to extrude from or press into the background using carefully matched box-shadow pairs — one lighter and one darker than the background color.
The key rule: the element's background color must exactly match its parent's background. The illusion breaks if they differ.
The Four Effect Types
Flat — the default raised appearance. Two outer shadows push the element up from the surface.
Pressed — inverted inset shadows give the illusion the element is pushed into the surface.
Concave — outer shadows combined with a concave gradient on the element face.
Convex — outer shadows combined with a convex (bulging) gradient on the element face.
Shadow Parameters Explained
Distance — the x/y offset of each shadow. Larger values = more prominent depth.
Blur — the spread/softness of the shadow. Usually 2× the distance value.
Intensity — controls the alpha of both shadow colors. Lower = more subtle.
Border Radius — the element's corner radius from sharp (0) to pill/circle (50%+).
Accessibility Warning
Neumorphism can create low-contrast interfaces. Ensure your interactive elements have sufficient contrast ratios (WCAG AA requires 4.5:1 for text, 3:1 for large text and UI components). Use the A11Y badge in the preview as a reminder.
When to Use Neumorphism
Best applied to single focused UI components like buttons, cards, sliders, and toggles. Avoid applying to entire page layouts as excessive softness reduces visual hierarchy. Works best on mid-range neutral colors — very dark or very light backgrounds reduce the shadow visibility.
Frequently Asked Questions
The effect requires enough room in the lightness scale to produce both a lighter and darker shadow. Very dark backgrounds (near black) or very light backgrounds (near white) compress the available range, making shadows invisible. Mid-range lightness values (30–70% HSL) produce the most visible results.
Glassmorphism uses transparency and blur to create a frosted-glass floating panel effect. Neumorphism uses matched shadow pairs to make solid elements appear raised or pressed into a surface. Glassmorphism works on any background; neumorphism requires a matching element/background color.
Yes. The CSS is a single box-shadow property and requires no JavaScript or special libraries. It is supported in all modern browsers. Watch out for accessibility — low contrast neumorphic designs may fail WCAG audits.
Pick a dark background color (e.g. #2d3436 or #1e272e). The shadow colors will auto-derive — the light shadow becomes a subtle lighter tone and the dark shadow becomes near-black. Use a lower intensity (15–30%) for dark backgrounds as the contrast is naturally reduced.
The Tailwind output extends your tailwind.config.js boxShadow theme with a named neumorphism utility. Add the config snippet to your project then use classes like shadow-neu on any element.