Question 1

What is neumorphism (soft UI)?

Accepted Answer

Neumorphism, or soft UI, is a style where an element looks like it is extruded from, or pressed into, a single-colored surface. Instead of a drop shadow on a separate background, the element shares the exact same background color and is lit by two opposite shadows — a light highlight on one side and a darker shadow on the other — so it appears softly molded out of the surface itself.

Question 2

Why does neumorphism use two shadows?

Accepted Answer

A real raised object catches light on one corner and casts shadow on the opposite corner. Neumorphism fakes that with two box-shadows: a lighter shadow offset toward the light source (top-left by convention) and a darker shadow offset the other way (bottom-right). The light shadow is the base color lightened and the dark shadow is the base color darkened, which is why both are derived automatically from a single base color.

Question 3

Why must the background be the same color as the element?

Accepted Answer

The soft, molded look only works when the element and its container share the same color. The two shadows then read as gentle changes in lighting on one continuous surface, rather than as a card floating above a different background. If the background color differs, the effect breaks and it just looks like an ordinary shadowed box — that is why the preview here always sits on a background matching your base color.

Question 4

What is the difference between concave and convex?

Accepted Answer

Flat keeps the surface a single solid color. Convex adds a subtle gradient that is lighter at the top and darker at the bottom, making the element look like it bulges outward toward you. Concave reverses the gradient (darker at top, lighter at bottom) so the surface looks like it curves inward. Pressed uses inset shadows so the shape appears recessed into the surface, like a pushed-in button.

Question 5

Is neumorphism good for accessibility?

Accepted Answer

Use it carefully. Because the contrast between the element and its background is intentionally very low, neumorphic buttons and inputs can be hard to perceive, and text or icons on them may fail WCAG contrast requirements. Keep neumorphism for decorative containers, add clear focus states and higher-contrast labels for interactive controls, and avoid relying on the soft shadows alone to signal that something is clickable.

NeumorphismGenerator

Neumorphism
Generator