Neumorphism Generator

Neumorphism Generator produces the soft, extruded look known as neumorphism or soft UI. You pick a shape — flat, pressed, or convex — and tune the distance, blur, and border radius over a background color, and the tool builds the matching box-shadow CSS live. A preview shows exactly how the element will look, and a copy-ready code block holds the styles. Everything runs in your browser.

1. Choose a shape: flat, pressed, or convex 2. Set the background color to match your interface 3. Adjust the distance, blur, and border radius sliders 4. Watch the preview update in real time 5. Click Copy to grab the generated CSS

Neumorphism works best when the element and its background share the same color, so the shadows blend into a soft 3-D effect — pick a background color close to your page. Flat gives a raised look, pressed sinks the element inward, and convex adds a subtle gradient for a rounded feel. Smaller blur values keep edges crisp, while larger ones feel softer. A higher border radius rounds the corners for a friendlier shape.