FlowToolkit
Utility

Neumorphism Generator

Design soft UI elements with neumorphic shadows.

Loading tool…

About this tool

Create neumorphic UI elements with convex, concave, and flat styles. Control shadow distance, blur, border radius, and base color to achieve the perfect soft UI look.

Soft UI, hard to hand-code

Neumorphism creates the illusion that UI elements are continuous with the background surface — either extruding from it (convex) or pressed into it (concave). The effect relies on two shadows with opposite directions: a light shadow (typically white) for the highlighted edge and a dark shadow for the recessed edge.

This generator automates the dual-shadow math. Pick a base colour, choose convex, concave, or flat, and adjust the distance and blur. The preview updates immediately so you can see how the lighting direction and softness affect the result.

Getting the best results

  • Use muted, mid-tone base colours. Very light or very dark bases reduce shadow contrast.
  • Keep the shadow distance moderate — 4–12 pixels works well for most element sizes.
  • Match the light source: both shadows should angle from the same direction (top-left is conventional).

Frequently asked questions

What is neumorphism?

Neumorphism (or soft UI) is a design style that creates elements that appear to extrude from or be pressed into the background using dual shadows — one light and one dark.

What is the difference between convex and concave?

Convex makes the element appear to rise above the surface using an external shadow. Concave makes it look recessed or pressed in using inset shadows.

What base color should I use?

Neumorphism works best with muted, pastel colors like light grey, beige, or soft blue. The effect relies on a subtle contrast between light and dark shadows.