Generate a Neumorphic Soft UI Button CSS
Build a soft UI button with a light and dark shadow pair that makes it look raised from the surface. Switch to pressed mode for an inset active state and copy the CSS.
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
- 1Set a muted, non-white background color
- 2Adjust shadow distance, blur, and intensity
- 3Choose raised, convex, concave, or pressed
- 4Copy the dual box-shadow CSS
More Generate Tools
All generators →Generate JSON Schema from an API Response
Paste a JSON API response and generate a valid JSON Schema for validation. Free online JSON Schema generator, runs in your browser.
Generate an HTML Email Signature for Gmail
Create a professional HTML email signature with social icons and a logo for Gmail. Free online email signature generator, no signup.
Generate a Code 128 Barcode from Text
Generate a scannable Code 128 barcode from any text, SKU, or product code online for free. Download as PNG for labels and inventory, no signup.
Generate a Barcode for Product Labels
Make a Code 128 barcode for product labels, inventory, and shipping online for free. Download a print-ready PNG with adjustable size, no signup.
Generate Google Font Pairings for a Website
Find the best Google Fonts pairings for a website heading and body text. Free font pairing generator with live preview and CSS embed code, no signup.
Convert Python to JavaScript Online
Convert Python code to JavaScript with an AI code converter. Paste your Python, pick JavaScript, and get a translation in your browser, no signup.
Looking for FAQs and advanced options? Visit the full Neumorphism Generator page →