Neumorphism Generator (Soft UI)

Generate soft-UI neumorphism CSS — flat, concave, convex or pressed — with shadows matched to your colour.

What is neumorphism in design?

Neumorphism (soft UI) makes elements look extruded from the background using two shadows: a dark one on one side and a light one on the other, both derived from the background colour. Choose the colour, distance, blur and shape, and copy the box-shadow CSS.

Use it carefully

Soft UI has very low contrast, which makes buttons hard to identify for many users. Combine it with clear labels, icons and visible focus states, and keep important actions in a higher-contrast style (WCAG 1.4.11 asks for 3:1 for UI components).

Frequently asked questions

Why does it need a mid-tone background?

The light shadow must be lighter and the dark shadow darker than the background; pure white or black leaves no room.

What is the pressed style?

Inset shadows that make the element look pushed in, useful for active states.

Is it free?

Yes.