Neumorphism Generator
Create neumorphic (soft UI) designs with customizable shadows and depth effects
How to use: Adjust the background color, shape type, dimensions, and shadow properties to create soft, embossed UI elements. Perfect for modern, minimal interfaces.
Neumorphism Controls
Configure soft UI properties
Base color for the neumorphic element
Protruding from surface
Dimensions
Shadow Properties
Shadow offset distance
Shadow color intensity
Shadow blur amount
Direction of virtual light source
Live Preview
Real-time neumorphism effect preview
Neumorphic
Element
Generated CSS
Copy this CSS code and apply it to your elements
/* Neumorphism Effect */
background: #e0e5ec;
border-radius: 20px;
box-shadow: -20px -20px 40px rgb(239, 244, 251), 20px 20px 40px rgb(209, 214, 221);
width: 200px;
height: 200px;Current Settings
Summary of all neumorphism properties
Background:
#e0e5ec
Shape Type:convex
Dimensions:200×200px
Border Radius:20px
Distance:20px
Intensity:15
Blur:40px
Light Direction:top-left
Shadow Colors:
Light: rgb(239, 244, 251)
Dark: rgb(209, 214, 221)
Usage Examples & Tips
Common Use Cases:
- • Buttons and interactive elements
- • Cards and content containers
- • Input fields and form controls
- • Dashboard widgets and panels
- • Mobile app interfaces
- • Toggle switches and controls
Design Tips:
- • Use muted, monochromatic color schemes
- • Keep shadows subtle for authentic soft UI
- • Match background colors for seamless integration
- • Test different shapes for various UI states
- • Consider accessibility and contrast ratios
- • Use sparingly to avoid visual overwhelm
Shape Type Explanations:
Flat/Convex: Creates a protruding appearance, perfect for buttons and raised elements.
Concave/Pressed: Creates an inset appearance, ideal for input fields and pressed states.
Browser Support:
Neumorphism effects use standard CSS box-shadow which is supported in all modern browsers.
For best performance, avoid using too many neumorphic elements on a single page.