About neumorphism (soft UI)
Neumorphism (or soft UI) is a design style where elements look like they are extruded from, or pressed into, the background using two soft shadows — one light, one dark. This generator lets you set the base colour, shadow distance, blur, radius and shape (flat, concave or convex) with a live preview, then copy the box-shadow CSS.
How Neumorphism works
How to make a soft-UI element
- Choose a base colour — the element and its background share it.
- Set the shadow distance, blur and corner radius.
- Pick a shape — flat, concave (pressed in) or convex (raised) — and copy the CSS.
The two-shadow trick
Neumorphism uses a darker shadow on one corner and a lighter highlight on the opposite corner of the same base colour, so the element appears to rise from or sink into the surface. The background must be the same colour for the illusion to work.
Use it carefully
Soft UI looks elegant but can have low contrast, which hurts accessibility. Reserve it for decorative panels and pair it with clear, high-contrast text and icons.
Common uses
- Design soft, tactile cards and panels
- Create raised or pressed buttons
- Build a soft-UI dashboard
- Style toggles and controls
- Match a minimal, monochrome aesthetic
- Make decorative containers
- Experiment with concave/convex looks
- Copy ready-made box-shadow CSS
Frequently asked questions
How do I create a neumorphism effect?
Use two box-shadows — a dark one and a light one — on an element that shares its background colour. This tool builds it for you.
Why does the background need to match?
The raised/pressed illusion relies on the element and background being the same colour so only the shadows define the shape.
What is the difference between concave and convex?
Convex looks raised; concave looks pressed in. Flat has no inner gradient.
Is neumorphism accessible?
It can have low contrast — keep text and icons high-contrast and use it mainly for decorative elements.
Is anything uploaded?
No — it runs entirely in your browser.
Does it work in all browsers?
Yes — it uses standard box-shadow, supported everywhere.
Can I make pressed buttons?
Yes — choose the concave shape for an inset, pressed look.
Is it free?
Yes — completely free with no sign-up.