CSS Neumorphism Generator
Visual CSS neumorphism soft-UI effect generator
CSS Neumorphism Generator
Generate soft-UI neumorphic box-shadow effects with live preview
Colors
Shape
Shadow & Dimensions
Light Source
Click the dial or use the slider to rotate the virtual light source. At 145° (default) light comes from the top-left.
Live Preview
Preview background matches the chosen background color — required for neumorphism to render correctly.
Accessibility note: Neumorphism can have low contrast. Always verify WCAG contrast ratios with a contrast checker before using neumorphic elements in production interfaces.
Generated CSS
.neumorphism {background: #e0e5ec;border-radius: 16px;box-shadow: -8px 6px 20px rgba(177, 189, 207, 0.15), 8px -6px 20px rgba(255, 255, 255, 0.15);}
How to Use CSS Neumorphism Generator
- 1
Pick a background color using the color picker — all neumorphism shadows are derived from this single base color automatically.
- 2
Choose a shape mode (Flat, Pressed, Concave, or Convex) to control whether the element appears raised, sunken, or curved.
- 3
Adjust the Size slider to set the dimensions of the preview element from 50px to 400px.
- 4
Use the Distance slider to control how far the light and dark shadows are offset from the element.
- 5
Set the Intensity slider to control shadow opacity — lower values give a more subtle soft effect.
- 6
Adjust the Blur slider to soften the shadows — higher values create a smoother, more diffuse look.
- 7
Use the Border Radius slider to round the corners from sharp squares to fully circular pill shapes.
- 8
Rotate the Light Source Angle to change the direction the virtual light comes from, which affects the shadow positions. Then click "Copy CSS" to copy the generated styles.
About CSS Neumorphism Generator
Free CSS neumorphism generator — create soft UI shadow effects with adjustable light source, intensity, blur, and shape. Preview flat, concave, convex, and pressed states, then copy production-ready CSS for your soft UI designs.
Key Features
- 4 Shape Styles: Flat, concave, convex, and pressed neumorphic effects.
- Light Direction: Adjust the light source angle for realistic shadow casting.
- Intensity & Blur: Fine-tune shadow intensity, blur radius, and distance.
- Color Picker: Choose any base color — shadows auto-calculate lighter and darker shades.
- One-Click Copy: Copy the complete CSS box-shadow declaration.
Who Is This For?
UI designers exploring soft UI / neumorphic design trends, frontend developers building modern interfaces, and anyone who wants to quickly generate neumorphism CSS.
Privacy & Security
Runs 100% in your browser — no signup, no uploads, no data stored.