CSS Neumorphism Generator
Design soft UI elements with neumorphic shadows, shapes, and light/dark mode support
About CSS Neumorphism Generator
Design soft UI elements with neumorphic shadows — flat, concave, convex, and pressed states with light/dark mode support, all in your browser.
How to use CSS Neumorphism Generator
- 1Choose a shape type: Flat, Concave, Convex, or Pressed.
- 2Toggle between Light and Dark color modes.
- 3Adjust distance, intensity, blur, and border radius for the neumorphic effect.
- 4Set the element size and background color.
- 5Preview the result and copy the CSS output.
Tips
- Neumorphism works best with soft, desaturated colors — avoid pure white or bright colors.
- Use the Pressed state for active buttons and the Convex state for default buttons.
- Neumorphic designs can hurt accessibility — always ensure sufficient contrast for text on neumorphic elements.
Free vs paid limits
Free: basic shapes. Starter+: premium shapes.
OneKitTools TeamUpdated 2.21.4