Soft UI · Dual Shadow Physics · Concave & Inset
Neumorphism Generator
Generate tactile Soft UI surfaces that appear extruded directly from the canvas. Simulate light angles, pressed inset states, and export clean CSS dual shadows.
Color Presets:
Surface Geometry & Shape
Light Source Angle
Lighting Physics & Dimensions
Surface Color:
#e0e5ec
Size180px
Radius36px
Shadow Distance12px
Blur Radius24px
Shadow Contrast / Intensity15%
Interactive Surface Preview
/* Neumorphism (Soft UI) */
background: #e0e5ec;
border-radius: 36px;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;Neumorphism (Soft UI): Light Physics, Aesthetics & Accessibility
1The Optical Physics of Dual Shadows
- Surface Uniformity: The element background color MUST match or closely blend with the parent canvas background. Neumorphism relies on illusion rather than high border contrast.
- Cast Dark Shadow: Placed opposite the light source (e.g. positive X/Y offset for Top-Left illumination) to simulate ambient occlusion.
- Specular Light Highlight: Placed toward the light source with negative X/Y offset using a tint brighter than the base surface color.
- Inset Pressed States: Switching from standard drop shadows to
insetshadows inverts the light reflection, giving the physical sensation of an extruded button being pushed into the surface.
2Solving the Neumorphic Accessibility Dilemma
The primary critique of neumorphic interfaces is poor contrast: subtle shadows rarely meet the WCAG 3.0:1 threshold for non-text UI indicators.
• Pair soft buttons with high-contrast inner glyphs or text (4.5:1+)
• Add active state accents (like neon LED indicators or colored borders)
• Avoid using neumorphism for critical form fields or navigation items
When applied selectively to audio knobs, IoT smart-home panels, or media control buttons, neumorphism delivers a tactile, playful user experience.