Create neumorphic cards and controls with light/dark modes and code export.
Outset = raised; Inset = pressed in
.neumorphic {
background: #e0e5ec;
border-radius: 20px;
box-shadow: 10px 10px 20px #a3b1c6, -10px -10px 20px #ffffff;
}Neumorphism (or soft UI) is a design style that uses subtle shadows to make elements appear extruded from or pressed into the background. The element shares the same base color as its container; a light shadow on one side and a dark shadow on the opposite side create a soft 3D effect. Unlike flat design, neumorphism relies on box-shadow with two offsets—one lighter, one darker—to suggest depth. It gained attention around 2019 but has drawn criticism for accessibility and usability. Use it selectively for controls and cards where the background color matches the element.
A neumorphic element needs background equal to the page or container background, plus a dual box-shadow: one shadow offset down-right (darker) and one offset up-left (lighter). For light mode: box-shadow: 10px 10px 20px #a3b1c6, -10px -10px 20px #ffffff;. For inset (pressed) style, use inset: box-shadow: inset 10px 10px 20px #a3b1c6, inset -10px -10px 20px #ffffff;. Combine with border-radius from a Border Radius Generator and refine shadows with a Box Shadow Generator.
Neumorphism uses soft dual shadows on a matching background; glassmorphism uses semi-transparent overlays with backdrop-filter: blur on colorful or textured backgrounds. Neumorphism is monochromatic and subtle; glassmorphism is colorful and layered. Neumorphism works best on flat, single-color backgrounds; glassmorphism needs gradients or images. Use neumorphism for minimal control panels; use glassmorphism for hero overlays and modals.
Neumorphism has well-documented accessibility problems. The effect relies on low-contrast shadows that can be invisible to users with low vision or in bright environments. Buttons and interactive elements may lack clear boundaries. WCAG recommends at least 3:1 contrast for UI components; neumorphic shadows often fail this. Add borders, stronger shadows, or focus rings to improve usability. Avoid neumorphism for critical actions or form inputs without additional affordances.
Neumorphism works for decorative cards, music player controls, or dashboards where the aesthetic is prioritized and users are familiar. It fails for dense UIs, small touch targets, or when clarity is paramount. Use it on light or dark solid backgrounds with sufficient shadow offset and blur. Avoid it for forms, primary CTAs, or content-heavy layouts. Test with real users and in various lighting conditions.
Using different background colors for the element and container breaks the effect. Shadow colors must be derived from the background (slightly lighter and darker). Setting shadow offset or blur too low makes the effect invisible; too high looks muddy. Applying neumorphism to text reduces readability. Nesting neumorphic elements without clear hierarchy confuses users. Forgetting hover and active states leaves controls feeling flat. Use a consistent shadow system across the interface.
Neumorphism (soft UI) is a design style that uses subtle shadows to make elements look extruded from or pressed into the background. Same base color as the background with light and dark shadows creates a soft 3D effect.
Light mode uses a light gray background with lighter highlight and darker shadow. Dark mode uses a dark background with darker shadows for a similar soft effect. Pick the one that matches your app theme.
Inset (pressed) style is useful for inputs, toggles, or buttons that look pushed in. Outset (raised) is for cards and floating controls. Toggle inset in the generator to see both.
Explore these related free tools to enhance your productivity and workflow.
Generate glass-effect UI panels with blur and transparency settings
Generate CSS box shadows with custom offsets, blur, spread, color, and opacity
Live editor for gradients, shadows, hover/focus states with CSS output
Create custom border radius values for all corners with individual or locked controls