Neumorphism CSS Generator
Build soft, extruded UI surfaces.
Neumorphism uses paired light and dark shadows on a matching background to make elements look softly extruded. Set the background, distance, intensity and radius, then copy the CSS.
Surface color
20px
60%
16px
background: #e0e5ec; border-radius: 16px; box-shadow: 20px 20px 30px rgba(174, 181, 195, 0.60), -20px -20px 30px rgba(255, 255, 255, 0.60);
How to build neumorphism
- Pick a background color; soft pastel grays work best.
- Choose light or dark mode.
- Adjust distance, intensity and corner radius with the sliders.
- Copy the CSS and use it on elements with the same background color.
Frequently asked questions
Why must the element share the background color?
The illusion depends on both shadows blending into the same surface color, so the element and its parent should match.
What is the difference between light and dark mode?
Dark mode uses subtle white and black shadows on a dark background instead of the classic light-gray look.
Is neumorphism accessible?
Use it with sufficient contrast for text and never rely on the shadow alone to show interactivity.