Neumorphism Generator
Make buttons and cards that look pressed out of, or into, the page.
- Your data never leaves your device
- 100% free
- No sign-up
- Works offline after first load
How to make a neumorphism effect
- Pick a base colour and a shape.
- Choose where the light comes from and tune distance, intensity and blur.
- Copy the CSS (and set the same colour on the parent background).
About Neumorphism
Create soft-UI (neumorphism) CSS.
Everything works in your browser, so it is instant and private. Your recent colours and settings are remembered on this device, and the address bar keeps your colour so you can share or bookmark it.
Good for
- Soft UI buttons and toggles
- Dashboard cards and widgets
- Music players and smart-home UIs
Tip: Set the parent background to the same colour — that is what makes the shape look extruded.
Frequently asked questions
How is neumorphism made?
Two shadows on an element the same colour as its background: a darker one away from the light and a lighter one towards it. Pressed uses inset shadows; concave and convex add a subtle gradient.
Is neumorphism accessible?
Its low contrast can make buttons hard to see. Use it for decoration and add clear text, icons or borders for important controls.
Which colours work best?
Mid-light, low-saturation colours — soft greys, mints and beiges. Very dark or very bright bases leave little room for the light and dark shadows.
Why does it look flat on my site?
The effect needs the element to sit on a background of the same colour. On a different background the light and dark shadows don't blend in.
Can I use it on buttons and inputs?
Yes. The CSS is just a background and box-shadow, so it works on buttons, cards and form fields alike.