How to Create a Neumorphism (Soft UI) Effect in CSS
Published September 15, 2026 · 2 min read
Neumorphism — the soft, seemingly-extruded "soft UI" look — relies on two offsetting shadows, one lighter and one darker than the base color, positioned on opposite corners. This tool computes the correct shadow colors automatically from your base color and lets you preview raised or pressed states.
Try Neumorphism GeneratorSteps
- 1
Open the Neumorphism Generator
Go to the neumorphism generator.
- 2
Choose a base color
Pick the element's background color — light, muted colors work best for this effect.
- 3
Set distance, blur and intensity
Adjust how far the shadows sit from the element and how pronounced the light/dark contrast is.
- 4
Choose raised or pressed
Pick whether the element should look like it's popping out or pressed in.
Frequently asked questions
The tool lightens and darkens your chosen base color by the intensity amount you set, generating a matching light and dark shadow automatically rather than requiring you to pick them separately.
Raised uses regular outer shadows for an element that looks like it's popping out of the surface; pressed uses inset shadows for the opposite, sunken-in look.
It works best with light-to-medium, fairly desaturated colors, since the effect relies on subtle brightness differences that are harder to see against very dark or highly saturated backgrounds.
Because the shadow math happens automatically, you get correctly balanced neumorphic shadows without manually picking two separate colors by trial and error.