Neumorphism Generator
Design soft-UI neumorphic surfaces with dual shadows — copy the CSS.
About the Neumorphism Generator
Design soft-UI neumorphic surfaces with dual shadows — copy the CSS. Every value is computed locally with vanilla JavaScript — there is no server round-trip, no sign-up and no limit on how many times you use it.
How to use
Pick a base color
Choose the surface color the element sits on.
Set distance
Adjust the shadow offset to control depth.
Set blur
Soften or sharpen the dual shadows.
Copy the CSS
Paste the soft-UI styles onto your element.
Benefits
Soft, tactile UI
Create the extruded soft-shadow look in seconds.
Balanced shadows
Light and dark shadows are derived from your base color automatically.
Copy-ready output
Get clean box-shadow CSS without manual tweaking.
Features & supported formats
Features
- Base color input
- Adjustable distance
- Adjustable blur
- Dual-shadow output
- Live preview
Supported formats
Frequently asked questions
Why does neumorphism use two shadows?
It places a light shadow and a dark shadow on opposite sides to fake a soft, extruded surface.
What background should I use?
Neumorphism relies on the element and its background sharing the same color, so set them to match.
Is neumorphism accessible?
Low contrast is a common downside; pair it with clear borders or text contrast for usability.
How are the shadow colors chosen?
They are calculated by lightening and darkening your base color so they always coordinate.
Can I make it look inset?
Yes. Swap the offsets or add the inset keyword in the copied CSS for a pressed-in effect.