Neumorphism Generator

Design soft-UI shadows with CSS.

Size · 160pxDistance · 20pxBlur · 40pxRadius · 28pxBase colorInset (pressed)

border-radius: 28px;
background: #e0e0e0;
box-shadow: 20px 20px 40px rgb(190, 190, 190), -20px -20px 40px rgb(255, 255, 255);

Free neumorphism (soft UI) generator. Tune size, distance, blur and base color to create the soft extruded look, preview it live, and copy the two-shadow box-shadow CSS. Runs in your browser.

How to use the Neumorphism Generator

01Pick a base color matching your page background.
02Adjust the size, distance and blur of the shadows.
03Toggle inset for a pressed look, then copy the CSS.

Frequently asked questions

Why does neumorphism use two shadows?

The soft-UI look needs a dark shadow on one side and a light highlight on the other to fake extrusion. This generator computes both from your base color automatically.