Neumorphism Generator
Design elegant soft-shadow neumorphic UI elements with customizable depth, color, and shape controls
border-radius: 50px; background: #e0e5ec; box-shadow: -16px 11px 60px #b0bdcf, 16px -11px 60px #ffffff;
How to Use This Tool
Set the background color — neumorphism works best with soft, muted colors.
Adjust Size, Radius, Distance, Intensity, and Blur to control the shadow effect.
Choose a shape: Flat, Concave, Convex, or Pressed (inset).
Change the light direction angle. Copy the generated CSS.
About This Tool
Neumorphism Generator creates soft, extruded UI elements using CSS box-shadow. The tool calculates light and dark shadow colors automatically from your background color. Supports four shape types: Flat (raised surface), Concave (indented), Convex (bulging), and Pressed (inset). Control the light source angle, shadow distance, blur, and intensity. Everything updates in real time with a live preview.
Frequently Asked Questions
Soft, muted colors work best — light grays (#e0e5ec), soft pastels, or desaturated tones. The effect relies on subtle shadow differences that get lost on very dark or very light backgrounds.
Neumorphism can have accessibility issues due to low contrast. Use it for decorative elements and ensure interactive elements have sufficient contrast and clear focus states.
Share This Tool
Related Tools
Color Palette Generator
Generate harmonious color palettes with complementary, analogous, and triadic color scheme support
Color Contrast Checker
Check WCAG 2.1 color contrast ratios to ensure your designs meet AA and AAA accessibility standards
CSS Gradient Generator
Build stunning linear and radial CSS gradients with a visual color picker, angle control, and code export
Glassmorphism Generator
Create modern frosted-glass UI effects with adjustable blur, transparency, and border styling in pure CSS
CSS Unit Converter
Convert between px, rem, em, vh, vw, and other CSS units based on your root font size settings