Generate Neumorphism CSS Online
Design soft, tactile neumorphic UI elements with an interactive editor. Adjust light direction, intensity, blur, and shape type - copy the CSS for buttons, cards, and inputs.
Neumorphism Generator
Generate soft UI neumorphic CSS styles
-10px -10px 20px #ffffff
10px 10px 20px #b8bdc4
.neumorphic {
border-radius: 16px;
background: #e0e5ec;
box-shadow:
10px 10px 20px #b8bdc4, -10px -10px 20px #ffffff;
}style={{
borderRadius: '16px',
background: '#e0e5ec',
boxShadow: '10px 10px 20px #b8bdc4, -10px -10px 20px #ffffff'
}}rounded-[16px] bg-[#e0e5ec] shadow-[10px_10px_20px_#b8bdc4,_-10px_-10px_20px_#ffffff]Quick Start
- 1Choose a shape type (flat, concave, convex, pressed)
- 2Adjust shadow intensity and blur radius
- 3Set background color and size
- 4Copy the CSS box-shadow and background code
More Generate Tools
All generators →Edit SVG Paths Online
Edit SVG path data and Bezier curves with a visual editor. Free online SVG path editor with live preview.
Generate Color Shades & Tints Online
Generate lighter and darker shades of any color. Free online color shade generator for designers.
Generate URL Slugs Online
Convert any text into clean, SEO-friendly URL slugs. Free online slug generator.
Generate Barcodes Online - Code128, EAN, UPC
Generate barcodes in Code128, EAN-13, UPC-A, and other formats. Free online barcode generator with download.
Generate a Changelog Online - Keep a Changelog Format
Generate a CHANGELOG.md file in Keep a Changelog format. Free online changelog generator for open-source projects.
Generate an HTML Email Signature Online
Create a professional HTML email signature with social links and branding. Free online email signature generator.
Looking for FAQs and advanced options? Visit the full Neumorphism Generator page →