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), Concave (indented), Convex (bulging), and Pressed (inset). Control the light source angle, shadow distance, blur, and intensity — all with real-time preview.
Share This Tool
Related Tools
Color Palette Generator
Generate harmonious color palettes with complementary, analogous, and triadic color scheme support
CSS Gradient Generator
Build stunning linear and radial CSS gradients with a visual color picker, angle control, and code export
Color Contrast Checker
Check WCAG 2.1 color contrast ratios to ensure your designs meet AA and AAA accessibility standards
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