🧈 Neumorphism (Soft UI) CSS Generator

Pick a base color and this tool auto-computes matching light and dark shadow colors for the classic soft-UI dual shadow — fully editable, raised or pressed, with a live preview and copyable CSS.

1. Controls

Raised

Pressed (inset)

Base background color

Panel size (160px)

Border radius (24px)

Shadow distance (8px)

Shadow blur (16px)

Shadow intensity (18%)

Auto-compute shadow colors from base color

Light shadow color

Dark shadow color

🧈 Neumorphism (Soft UI) CSS Generator

1. Controls

2. Live preview

3. CSS output

🧈 Neumorphism (Soft UI) CSS Generator

1. Controls

2. Live preview

3. CSS output

More Color & CSS/Design Tools