Neumorphism Generator

Preview

Generated CSS:

background-color: #e0e0e0;
box-shadow:  5px 5px 10px 2px #a3a3a3, 
                 -5px -5px 10px 2px #ffffff;

Neumorphism Examples:

Example 1
background-color: #e0e0e0;
box-shadow:  5px 5px 15px 5px #a3a3a3, 
                         -5px -5px 15px 5px #ffffff;
Example 2
background-color: #ffffff;
box-shadow: inset 5px 5px 10px 3px #d0d0d0, 
                        inset -5px -5px 10px 3px #f0f0f0;
Example 3
background-color: #e0e0e0;
box-shadow:  10px 10px 20px 4px #b3b3b3, 
                         -10px -10px 20px 4px #ffffff;
Example 4
background-color: #e0e0e0;
box-shadow:  5px 5px 15px 5px #a3a3a3, 
                         -5px -5px 15px 5px #ffffff;
Example 5
background-color: #ffffff;
box-shadow: inset 5px 5px 10px 3px #d0d0d0, 
                        inset -5px -5px 10px 3px #f0f0f0;
Example 6
background-color: #e0e0e0;
box-shadow:  10px 10px 20px 4px #b3b3b3, 
                         -10px -10px 20px 4px #ffffff;
Example 7
background-color: #f7f7f7;
box-shadow:  8px 8px 12px 2px #d1d1d1, 
                         -8px -8px 12px 2px #ffffff;
Example 8
background-color: #d4d4d4;
box-shadow: inset 6px 6px 8px 3px #a8a8a8, 
                        inset -6px -6px 8px 3px #ffffff;
Example 9
background-color: #c1e1c1;
box-shadow:  4px 4px 16px 5px #9ab89a, 
                         -4px -4px 16px 5px #ffffff;
Example 10
background-color: #ffe6e6;
box-shadow: inset 7px 7px 10px 3px #ffcccc, 
                        inset -7px -7px 10px 3px #ffffff;
Example 11
background-color: #e2e2e2;
box-shadow:  10px 10px 25px 5px #b3b3b3, 
                         -10px -10px 25px 5px #f9f9f9;
Example 12
background-color: #ffcc99;
box-shadow: inset 8px 8px 14px 6px #cc9966, 
                        inset -8px -8px 14px 6px #ffffff;
Example 13
background-color: #cce5ff;
box-shadow:  5px 5px 12px 4px #99c2ff, 
                         -5px -5px 12px 4px #ffffff;
Example 14
background-color: #e0e0e0;
box-shadow:  5px 5px 15px 5px #a3a3a3, 
                         -5px -5px 15px 5px #ffffff;
Example 15
background-color: #ffffff;
box-shadow: inset 5px 5px 10px 3px #d0d0d0, 
                        inset -5px -5px 10px 3px #f0f0f0;
Example 16
background-color: #e0e0e0;
box-shadow:  10px 10px 20px 4px #b3b3b3, 
                         -10px -10px 20px 4px #ffffff;
Example 17
background-color: #f7f7f7;
box-shadow:  8px 8px 12px 2px #d1d1d1, 
                         -8px -8px 12px 2px #ffffff;
Example 18
background-color: #d4d4d4;
box-shadow: inset 6px 6px 8px 3px #a8a8a8, 
                        inset -6px -6px 8px 3px #ffffff;
Example 19
background-color: #c1e1c1;
box-shadow:  4px 4px 16px 5px #9ab89a, 
                         -4px -4px 16px 5px #ffffff;
Example 20
background-color: #ffe6e6;
box-shadow: inset 7px 7px 10px 3px #ffcccc, 
                        inset -7px -7px 10px 3px #ffffff;
Example 21
background-color: #e2e2e2;
box-shadow:  10px 10px 25px 5px #b3b3b3, 
                         -10px -10px 25px 5px #f9f9f9;
Example 22
background-color: #ffcc99;
box-shadow: inset 8px 8px 14px 6px #cc9966, 
                        inset -8px -8px 14px 6px #ffffff;
Example 23
background-color: #cce5ff;
box-shadow:  5px 5px 12px 4px #99c2ff, 
                         -5px -5px 12px 4px #ffffff;
Example 24
background-color: #ffe0b2;
box-shadow:  4px 4px 18px 5px #f9c6a5, 
                         -4px -4px 18px 5px #ffffff;
Example 25
background-color: #fce4ec;
box-shadow: inset 3px 3px 22px 6px #f1a7b2, 
                        inset -3px -3px 22px 6px #ffffff;
Example 26
background-color: #e1bee7;
box-shadow:  5px 5px 14px 4px #b48bca, 
                         -5px -5px 14px 4px #ffffff;
Example 27
background-color: #d1c4e9;
box-shadow: inset 6px 6px 10px 2px #a89bc6, 
                        inset -6px -6px 10px 2px #ffffff;
Example 28
background-color: #bbdefb;
box-shadow:  8px 8px 16px 5px #90caf9, 
                         -8px -8px 16px 5px #ffffff;
Example 29
background-color: #c8e6c9;
box-shadow: inset 7px 7px 12px 4px #a5d6a7, 
                        inset -7px -7px 12px 4px #ffffff;
Example 30
background-color: #ffccbc;
box-shadow:  5px 5px 10px 3px #ffab91, 
                         -5px -5px 10px 3px #ffffff;
Example 31
background-color: #b2ebf2;
box-shadow: inset 6px 6px 20px 5px #80deea, 
                        inset -6px -6px 20px 5px #ffffff;
Example 32
background-color: #ffecb3;
box-shadow:  8px 8px 15px 3px #ffe082, 
                         -8px -8px 15px 3px #ffffff;
Example 33
background-color: #d7ccc8;
box-shadow: inset 7px 7px 18px 4px #bcaaa4, 
                        inset -7px -7px 18px 4px #ffffff;

Neumorphism Generator

Generate modern neumorphism effects for your designs with this intuitive tool. Adjust border radius, shadow types, and colors to create unique, soft, and realistic UI elements. Whether you're creating cards, buttons, or panels, the neumorphism effect gives your designs a clean, futuristic look.

Key Features:

  • Adjustable Border Radius: Fine-tune the corner rounding to match your design needs.
  • Multiple Shadow Types: Switch between inset and outset shadows for a realistic depth effect.
  • Color Customization: Choose colors for both background and shadow to perfectly match your theme.
  • Real-time Preview: See the neumorphism effect in action as you adjust settings.
  • PNG Download: Download your customized neumorphism box as a PNG file for easy sharing or integration.

Unlock the power of neumorphism and add a unique, soft, and modern touch to your design projects with our Neumorphism Generator.