Neumorphism
Create soft UI / neumorphic design elements with live preview.
Free & unlimited
Light#ffffff
Base#e0e5ec
Dark#b0bdcf
240px
30px
12px
15
24px
Tip: Neumorphism works best with subtle colors close to the background. Avoid pure white or pure black. For dark mode, use low-saturation dark colors. The pressed state uses inset box-shadow.
.neumorphic {
border-radius: 30px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #b0bdcf, -12px -12px 24px #ffffff;
}All processing happens in your browser. No data is sent to any server.
About this tool
- 1
Set the background color
Choose a base color - neumorphism works best with soft, muted tones rather than pure white or black.
- 2
Adjust shadow properties
Tune the blur, distance, and intensity of the light and dark shadows to control the depth effect.
- 3
Toggle between styles
Switch between flat, concave, convex, and pressed states to preview different neumorphic looks.
- 4
Copy the CSS
Grab the generated box-shadow and background CSS to use in your project.
- Neumorphism relies on matching the background color of the parent and child elements for the illusion to work.
- Avoid pure white (#fff) or pure black (#000) - slightly tinted grays like #e0e0e0 give the best soft-UI effect.
- Keep shadow distance moderate (5-15px) to maintain a subtle, realistic look.
- Test your neumorphic design for accessibility - low contrast can make interactive elements hard to distinguish.
- Live preview of concave, convex, flat, and pressed states
- Automatic light and dark shadow color calculation
- Adjustable blur radius, distance, and intensity
- Background color picker with hex and RGB input
- One-click CSS output with all necessary properties
- Design soft-UI dashboards and control panels.
- Create modern card components with subtle depth.
- Style toggle buttons and input fields with pressed/raised states.
- Prototype neumorphic mobile app interfaces.
The effect simulates light hitting a surface from one direction, creating a highlight shadow and a dark shadow. If the element background differs from its parent, the illusion breaks.
It can be problematic. The soft shadows provide low contrast, making it hard for some users to distinguish interactive elements. Always add clear focus states and consider pairing neumorphism with color or icon cues.
Absolutely. Rounded corners enhance the soft-UI look. Circles and pills are especially popular in neumorphic design.