Neumorphism Generator
Design soft, extruded neumorphic UI surfaces with dual shadows and copy the CSS.
—
The canvas background matches the element color — that is what makes the soft, extruded neumorphic look work.
By default the light and dark shadows are derived from the base color. Enable to set them yourself.
About Neumorphism Generator
The Neumorphism Generator designs the soft, extruded “soft UI” look: an element that appears pressed out of — or into — the surface behind it. Pick one base color and the tool derives everything else, because the effect only works when the element and its background share the same color and the depth comes entirely from two opposing box-shadows.
Sliders control the geometry: size, border radius, the distance of the shadows, their intensity and blur. Four shape modes — flat, concave, convex and pressed — swap the internal gradient and shadow direction, and a light-source picker moves the highlight to any of the four corners so the element matches the lighting of your design.
By default the light and dark shadow colors are computed from the base color, but a manual mode lets you set both yourself. The generated CSS — background, radius and the dual box-shadow — is one click away.
How to use Neumorphism Generator
- Choose the base color — it is applied to both the element and the canvas behind it.
- Pick a shape: flat, concave, convex or pressed.
- Set the light source corner to control where the highlight falls.
- Tune size, border radius, distance, intensity and blur with the sliders.
- Enable manual shadow colors if you want to override the derived light and dark tones.
- Copy the CSS and paste it onto your element.