Neumorphism Generator
Generate neumorphism effects
Parameters
Preview
CSS Code
About This Tool
The Neumorphism Generator creates soft, extruded UI elements using CSS shadows. Neumorphism (or Soft UI) combines background colors with subtle shadows to create elements that appear to push out from or sink into the surface.
Customize colors, shadow intensity, blur, and shape, then copy the generated CSS. Perfect for buttons, cards, inputs, and modern minimalist interfaces.
How It Works
How to Use This Generator
Creating neumorphic elements is easy:
- Choose background color - Select a base color (works best with soft, muted colors).
- Adjust shadow settings - Control distance, blur, and intensity.
- Select shape type - Choose flat, concave, convex, or pressed styles.
- Copy CSS - Get the generated code for your project.
Formula
Neumorphism CSS Structure
Key properties: background: #e0e0e0; box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff; border-radius: 20px;
Pressed/inset state: box-shadow: inset 8px 8px 16px #bebebe, inset -8px -8px 16px #ffffff;
Examples
Examples
Example 1: Raised Button
- Background: #e0e0e0
- Light shadow: -5px -5px 10px #ffffff
- Dark shadow: 5px 5px 10px #bebebe
- Effect: Button appears raised
Example 2: Pressed Input
- Background: #e0e0e0
- Inset shadows create sunken effect
- Perfect for text inputs and toggles
Example 3: Convex Card
- Gradient background (lighter top)
- Subtle shadows for depth
- Great for content cards
Frequently Asked Questions
What is neumorphism in UI design?
Neumorphism (new skeuomorphism) creates soft, extruded shapes using dual shadows — a light shadow on one side and a dark shadow on the other. Elements appear to push out from or press into the background, creating a soft 3D effect.
How do I create a neumorphic element with CSS?
Use two box-shadows on a matching background: box-shadow: 8px 8px 16px #d1d1d1, -8px -8px 16px #ffffff. The background color must match the parent. The generator adjusts shadow distance, blur, and intensity.
What are the accessibility concerns with neumorphism?
Neumorphism often has low contrast between elements and backgrounds, making it difficult for visually impaired users. Buttons may not look clickable. Always ensure sufficient contrast ratios and add clear focus indicators for interactive elements.
Can I create pressed/inset neumorphic buttons?
Yes. Use inset shadows for a pressed state: box-shadow: inset 5px 5px 10px #d1d1d1, inset -5px -5px 10px #ffffff. Toggle between raised and pressed states on click for interactive feedback. The generator creates both states.
What colors work best for neumorphism?
Soft, muted colors work best — light grays (#e0e0e0), soft pastels, or desaturated tones. The background and element must be the same color. Avoid pure white or very dark colors as the shadow effect becomes invisible.
Disclaimer
Disclaimer: The generated CSS code is provided as-is for use in your projects. Browser rendering may vary slightly. Neumorphism can have accessibility issues due to low contrast; ensure text and interactive elements have sufficient contrast. Always test across target browsers and devices.
💡 Tips
Tips
- Use soft, muted background colors (avoid pure white or black)
- Light source should be consistent (typically top-left)
- Keep shadow distance proportional to element size
- Add hover states with increased shadow for interactivity
- Ensure sufficient contrast for accessibility