Neumorphism — soft UI — gives interfaces a tactile, extruded-plastic look using light and shadow on a single background colour. This free CSS neumorphism generator builds the effect live: pick a base colour, tune the shadow distance, blur and intensity, then copy the ready-to-use CSS. Everything runs in your browser.
Live preview
Generated CSS
How to Use
- Pick a base colour for your surface.
- Choose a shape: flat, concave, convex or pressed.
- Tune the shadow distance, blur and intensity while watching the live preview.
- Copy the generated CSS into your project.
Key Features
- Live neumorphic preview on any base colour.
- Four shapes including pressed (inset) styles.
- Copy-ready CSS output.
- Runs entirely in your browser.
FAQs
What is neumorphism?
Neumorphism (soft UI) is a design style that creates soft, extruded shapes using two shadows — one dark, one light — on a background of the same colour.
Will this work in all browsers?
Yes. The output uses standard box-shadow and linear-gradient CSS supported by all modern browsers.
Is neumorphism accessible?
Use it for decoration and keep text contrast strong, as the soft shadows alone do not meet contrast guidelines.