CSS Neumorphism Generator - Soft UI Design
Create neumorphism (soft UI) elements in CSS.
Aperçu
Paramètres
Le neumorphisme fonctionne mieux avec des couleurs claires et désaturées
Code CSS
.neumorphic {
background: #e0e5ec;
box-shadow: 10px 10px 20px #babfc6, -10px -10px 20px #ffffff;
border-radius: 50px;
}Supported formats
How it works
Choose your interface background color
Select style: convex, concave or flat
Adjust shadow intensity and radius
Copy generated CSS code
Privacy guaranteed
100% local generation in your browser.
Create soft UI interfaces with neumorphism
Neumorphism creates interfaces that seem tactile and organic. Elements appear molded into the surface, like sculpted from clay. Our generator produces perfect CSS code for this sophisticated effect. Generate neumorphism (soft UI) with dual inner and outer shadows, oriented light source and soft radius for buttons, cards and toggles with a tactile look. Adjust hue, saturation, lightness and opacity with real-time preview, then copy clean CSS code (HEX, RGB, HSL) sRGB-compliant for your linear, radial gradients, colored shadows and modern filters.
Convex effect (extruded)
Element seems to come out of the surface, like a raised button. Use for buttons, cards and clickable elements at rest.
Concave effect (inset)
Element seems pressed into the surface. Perfect for input fields, activated buttons and content areas.
Neumorphism for forms and inputs
Neumorphic form fields use concave effect to create distinct input areas. Combine with clear labels and visible focus states to maintain usability.
Neumorphism for buttons and interactions
Create buttons that visually change state: convex at rest, concave on click. Our code includes :hover and :active states for smooth transitions.
Accessibility and best practices
Neumorphism can pose accessibility challenges. Ensure sufficient text contrast (4.5:1 minimum), add subtle borders to delimit clickable areas, and test with visually impaired users.
Neumorphism with Tailwind CSS
Add custom shadows to your tailwind.config.js or use shadow classes generated by our tool. Easily integrate into your React, Vue or HTML components.
Neumorphism: limits and best practices
Neumorphism has low contrast, which causes WCAG issues. Reserve it for decorative elements or the light mode of dashboards. For primary action buttons, prefer a more contrasted style.