Soft UI Shadows
Neumorphism & Soft UI CSS Generator
Design elegant extruded and inset soft UI cards with mathematically computed dual light/dark box-shadows and subtle surface gradients.
Soft UI Box
240px × 240px • Radius: 40pxNeumorphism Parameters
Surface Shape
Base Canvas Color
Size240px
Border Radius40px
Distance15px
Blur30px
Generated CSS
border-radius: 40px;
background: #e0e5ec;
box-shadow: 15px 15px 30px #b2b7be, -15px -15px 30px #ffffff;4 Surface Styles (Flat, Concave, Convex, Inset)
Auto Highlight & Shadow Math
Adjustable Distance & Blur
1-Click CSS Box-Shadow Copy
How to Use Neumorphism & Soft UI CSS Generator (Step-by-Step Guide)
No software installation required. Complete your task in 3 easy steps directly in your browser.
1
Select Base Color
Choose your background canvas hex color; shadows calculate automatically.
2
Choose Surface Shape
Select between flat, concave, convex, or pressed (inset) styles.
3
Adjust Shadow Sliders
Fine-tune distance, blur, and corner radius, then copy generated CSS.
How helpful was this tool?
Rated 4.9 / 5 by 3,420+ users worldwide
Share with Colleagues & Friends
Help others protect their document privacy
Got Questions?
Frequently Asked Questions
It applies two opposing shadows: one lighter than the surface background (highlight) and one darker (shadow) along a 145-degree angle.