CSS Neumorphism Generator
Build soft-UI (neumorphism) shadows.
Background color
Generated CSS
.neumorph {
background: #e0e5ec;
border-radius: 30px;
box-shadow: 20px 20px 40px #bec3c9, -20px -20px 40px #e5e9ef;
}Generate Neumorphism (Soft UI)
Neumorphism â or soft UI â makes elements look like they're extruded from or pressed into the background, using two opposite shadows: a dark one and a light one. This generator computes both shadows from your background color and copies the CSS.
How it works
- The element shares the background's color
- A dark shadow on one side, a light one on the opposite
- Inset shadows make it look pressed in
- Larger distance and blur increase the effect
Accessibility caveat
Neumorphic controls often have very low contrast, which hurts usability and accessibility. Use it for accents and keep interactive elements clearly distinguishable.
Private & Processed Locally
The shadow colors are computed in your browser from your chosen background color.
Frequently Asked Questions
Common questions about the CSS Neumorphism Generator.
What is neumorphism?
A soft-UI style using two opposite shadows so elements look extruded from or pressed into the background.
How are the shadow colors chosen?
They are computed automatically by lightening and darkening your chosen background color.
Any accessibility caveat?
Yes, neumorphic controls can have low contrast, so use it carefully for interactive elements.