Neumorphism Generator
Generate neumorphic (soft UI) box-shadow CSS online for free — set base color, distance, blur, radius and shape (flat, concave, convex, pressed) with a live preview.
100% private — runs entirely in your browser. Your files never leave your device.
Neumorphism needs the element and its background to share the same base color — the effect comes from two opposite shadows. Keep contrast gentle for accessibility. Runs entirely in your browser.
How to use the Neumorphism Generator
- Pick a base color.
- Adjust distance, blur, radius and intensity.
- Choose a shape — flat, concave, convex or pressed.
- Copy the box-shadow CSS.
What you can use it for
- Design soft-UI (neumorphic) buttons and cards
- Generate the two-shadow effect correctly
- Match element and background colors
- Experiment with pressed and raised states
More free tools
Styling a website?
Generate shadows, gradients, layouts and effects with our free CSS tools — copy the code and go.
Browse all free CSS generators →Frequently asked questions
What is neumorphism?
A soft-UI style where elements look extruded from the background using two opposite shadows — a light one and a dark one.
Why does the effect disappear on my page?
The element and its background must share the same base color; the shadows create the depth. If the background differs, the illusion breaks.
Is neumorphism accessible?
Use it carefully — low contrast can hurt readability and focus visibility. Keep intensity gentle and pair it with clear affordances.
Is my data uploaded?
No — everything is generated in your browser.