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;}

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.

More CSS generator tools

From our directory of 30+ CSS tools.

Browse all →

generators

CSS Gradient

The ultimate CSS gradient generator with visual preview and code export.

#gradient#color#background

generators

Neumorphism.io

Generate soft-UI neumorphic CSS box-shadow styles interactively.

#neumorphism#box-shadow#soft-ui

generators

Glassmorphism CSS

Create frosted glass UI effects with backdrop-filter CSS code instantly.

#glassmorphism#backdrop-filter#blur

generators

CSS Clip-path Maker

Drag handles to create any clip-path shape and copy CSS instantly.

#clip-path#shapes#masking

generators

CSS Filter Generator

Build CSS filter chains visually and preview on any image in real time.

#filter#image#effects

generators

Fancy Border Radius

Generate organic blob shapes using CSS border-radius eight-value syntax.

#border-radius#shapes#blobs

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →