Neumorphism Generator
Design neumorphic (soft UI) effects — adjust background color, blur, distance, intensity, and shape with live preview.
Preview
Generated CSS
background: #e0e5ec; box-shadow: 10px 10px 30px #b0bdcf, -10px -10px 30px #ffffff; border-radius: 16px;
Color Presets
Shape
Controls
Shadow Colors
Light Shadow
#ffffff
Dark Shadow
#b0bdcf
Related Tools
You might also find these useful
Everything you need to know
Visual Neumorphism Editor
The Neumorphism Generator lets you design soft UI effects with precise control over blur, distance, intensity, and shape. The live preview shows a neumorphic element on a matching background, with shadow colors automatically calculated from your chosen background color using HSL color adjustments.
Four Shape Modes
Switch between Flat, Concave, Convex, and Pressed shapes. Flat uses a solid background with outer shadows. Concave and Convex add subtle gradient overlays for a 3D surface effect. Pressed uses inset shadows for a recessed, button-down look.
Color Presets
Start with six background color presets — Light Gray, Warm, Cool Blue, Soft Green, Lavender, and Dark — then fine-tune with the color picker. The generator automatically computes the optimal light and dark shadow colors based on your background.
Shadow Color Preview
The Shadow Colors section shows the computed light and dark shadow hex values. This helps you understand the color relationship and manually adjust if needed for your specific design system.
Related Tools
Create glass effects with the Glassmorphism Generator, generate box shadows with the Box Shadow Generator, or build border radius shapes with the Border Radius Generator.