CSS Neumorphism Generator

Controls

Preview & CSS

 
   
 
 
   
 
 
 
How to Use
 
     
  1. Pick a base color — Neumorphism works best with mid-tone colors. The shadows are derived from this color automatically.
    2.  
  2. Choose shape — Switch between flat, pressed, concave and convex styles to change the depth illusion.
    3.  
  3. Adjust distance & blur — Distance controls shadow offset; blur controls softness. Higher values = stronger 3D feel.
    4.  
  4. Copy CSS — Click "Copy CSS" to grab the complete box-shadow and background rules.
    5.  
 
 
 
What Is Neumorphism?
 
Neumorphism (soft UI) is a design trend that creates the illusion of extruded or pressed elements using two directional box-shadow values — one lighter and one darker than the base background color.
 
It blends skeuomorphism's tactile depth with flat design's cleanliness. The key requirement is that the element and its background share the same color, with shadows providing the only sense of relief.
 
 
 
Common Use Cases
 
 
Dashboard widgets
 
Toggle switches
 
Knobs & sliders
 
Card components
 
Input fields
 
Icon containers
 
Music player UIs
 
Smart home interfaces
 
 
Tips & Best Practices
 
 
 Mid-tone backgrounds only 
Neumorphism fails on pure white or black. Use a mid-gray or pastel hue so both the light and dark shadows remain visible.
 
 
 Accessibility concerns 
Neumorphic elements can have very low contrast. Always verify interactive elements meet WCAG 2.1 contrast requirements. Add clear focus states.
 
 
 Use sparingly 
Apply neumorphism to key interactive elements, not every component. Overuse creates visual fatigue and makes pages feel heavy.
 
 
 Pressed state 
For buttons, invert the shadow directions on :active to simulate a physical press. This greatly improves perceived interactivity.
 
 
 
Frequently Asked Questions
 
 
Is neumorphism bad for accessibility?
 
It can be. The low contrast between elements and their backgrounds is a common accessibility issue. Always test with a contrast checker and provide additional visual indicators for interactive states.
 
 
 
What CSS properties create neumorphism?
 
Primarily box-shadow with two values: a light shadow offset in one direction and a dark shadow in the opposite. The element's background matches the parent exactly.
 
 
 
What is the difference between neumorphism and glassmorphism?
 
Neumorphism uses matching backgrounds with dual shadows to create a raised/pressed feel. Glassmorphism uses transparency and blur to simulate frosted glass. They are complementary but distinct trends.
 
 
 
Can I combine neumorphism with dark mode?
 
Yes. Use a dark mid-tone base (e.g., #2d2d2d) and generate a lighter and darker shadow from it. Dark neumorphism is increasingly popular.