Create soft UI shadow effects with full control over distance, blur, intensity, shape type, and border radius. Pick a background color and the generator automatically calculates the correct light and dark shadows for a perfect neumorphic look. Copy the CSS in one click.

Controls

#e0e5ec

PREVIEW
How Neumorphism Works
Neumorphism (soft UI) creates depth by casting two shadows from a single element — one light shadow in the top-left direction and one dark shadow in the bottom-right direction, both derived from the background color. The element itself must use the same color as its container background, which is why the background color picker is the most critical control.
Key tips:
  • Keep background colors in a mid-range lightness (not too dark, not too bright)
  • Shadow intensity above 0.4 can look harsh — 0.15–0.30 is the sweet spot
  • Use Pressed shape for active states like clicked buttons or focused inputs
  • Concave and Convex use a gradient overlay to enhance the 3D illusion
  • Neumorphism works best at larger sizes — tiny elements lose the effect
Glassmorphism effects → Glassmorphism Generator
Box shadows → Box Shadow Generator
CSS buttons → CSS Button Generator