Back to Tools
Neumorphism Generator
Generate Soft UI (Neumorphism) CSS code with custom shadows and shapes.
#e0e0e0
border-radius: 50px; background: #e0e0e0; box-shadow: 20px 20px 60px #bababa, -20px -20px 60px #ffffff;
flat
Neumorphism CSS Generator
Neumorphism (Soft UI) is a design trend that mimics physical objects using highlights and shadows to create depth. It creates elements that appear to be extruded from the background.
Achieving the perfect 'Soft UI' look requires precise calculation of box-shadows (one light, one dark). This tool does the math for you. You can adjust the light source direction, blur radius, and intensity to create buttons and cards that look tactile and modern.
Copy the generated CSS code to bring this futuristic aesthetic to your React or HTML projects.
How to use
- 1
Pick your base background color.
- 2
Adjust size, radius, and distance sliders.
- 3
Toggle between 'Concave' and 'Convex' shapes.
- 4
Copy the CSS code.