Built-in toolFree · No signup

CSS Neumorphism Generator

Design soft-UI neumorphic elements visually. Choose between Flat, Pressed, Concave, and Convex shapes. Tune distance, blur, and intensity while the background colour automatically derives the correct light and dark shadow colours.

Share on X LinkedIn

Background color

Shape type

Distance10px

Blur20px

Intensity100

Preview shape

Element size150px

Derived shadow colors

Dark

Light

CSS Output

.element {  background: #e0e0e0;  border-radius: 12px;  box-shadow: 10px 10px 20px #c2c2c2, -10px -10px 20px #fefefe;}

Was this tool helpful?

How to use

Pick a background

Choose a mid-tone colour — greys like #e0e0e0 work best. Extremes (black/white) reduce the effect.

Select shape type

Flat and Pressed are most common. Concave/Convex add subtle gradients for extra depth.

Tune shadows

Adjust distance and blur. Intensity controls how strong the light/dark shadow contrast is.

Copy CSS

Hit Copy CSS to get the complete box-shadow and background declarations.