Neumorphism Generator
Create soft UI neumorphic shadows and effects.
background: #e0e5ec;
border-radius: 16px;
box-shadow: 5px 5px 10px #c6cfdc,
-5px -5px 10px #f9fafb;How to Use the Neumorphism Generator
Pick a background color — soft neutral tones like light grays, pastels and muted colors work best for neumorphism. Use the size slider to control shadow distance and the intensity slider to adjust the contrast between the light and dark shadows. Choose between flat, concave, convex and pressed shape types to get different effects. Adjust the border radius for rounded corners. The preview updates in real time on a matching background. Click "Copy CSS" to grab the generated code.
Frequently Asked Questions
What is neumorphism?
Neumorphism (also called soft UI) is a design trend that combines flat design with subtle shadows to create an extruded, soft-plastic look. Elements appear to push out of or press into the background.
What colors work best?
Neumorphism works best with soft, neutral background colors. Light grays like #e0e5ec are classic choices. Avoid very dark or very bright backgrounds since the shadow contrast needs room to show.
What do the shape types mean?
Flat keeps the element surface uniform. Concave makes the surface appear curved inward with a subtle gradient. Convex makes it appear curved outward. Pressed creates an inset shadow that makes the element look pushed into the background.
How does size affect the shadow?
The size value controls the shadow distance and blur radius. A larger size creates a more pronounced, softer neumorphic effect while a smaller size produces a tighter, more subtle shadow.
More CSS & Design
Color Picker
Pick colors visually and get HEX, RGB, and HSL values.
Open tool →Gradient Generator
Create CSS linear and radial gradients with a visual editor.
Open tool →Color Palette Generator
Generate harmonious color palettes from a base color.
Open tool →Text Shadow Generator
Create CSS text shadows with a visual editor and presets.
Open tool →Box Shadow Generator
Create CSS box shadows with a visual editor.
Open tool →Border Radius Generator
Create CSS border-radius with a visual corner editor.
Open tool →