Neumorphism Generator

Create Soft UI elements with neumorphic shadows. Generate CSS code for buttons and cards that look extruded from or pressed into the screen surface.

Distance: 20

Blur: 40

Base Color

* Works best with light gray colors

background: #3b82f6;
border-radius: 30px;
box-shadow: 20px 20px 40px #a3a3a3, -20px -20px 40px #ffffff;

BUTTON

Neumorphism CSS Generator

Generate Soft UI CSS code. Neumorphism combines light and shadow to create elements that appear to be extruded from the screen.

Use subtle shadows and low contrast for the best effect. Works best on off-white or dark gray backgrounds.

Pick & Convert Colors

Make CSS Gradients

Check Accessibility