Create extruded, recessed, flat, and concave neumorphic UI components with light and dark specular shadow calculations.
Surface Geometry & Physics
Base Tone:#e0e5ec/* Neumorphic Soft UI (EXTRUDED) */
.neumorphic-surface {
background: linear-gradient(135deg, #e2e7ed, #cfd3da);
border-radius: 24px;
box-shadow: 6px 6px 18px 0px #b1b5bb, -6px -6px 18px 0px #ffffff;
}The Definitive Guide to Neumorphic (Soft UI) Web Design
Neumorphism combines minimalist flat design with skeuomorphic physical realism. Learn how light direction vectors, specular gradients, and dual box-shadows sculpt tangible UI components directly in CSS.
Flat Surface
A flat planar element matching the exact parent canvas background color. The 3D sensation comes entirely from paired light and dark specular box-shadows. Best for static cards, containers, and badges.
Extruded (Convex)
Simulates an outward bulging or convex surface. A gentle diagonal linear gradient flows from light highlight on the illuminated edge to shadow shade on the opposing edge. Ideal for unpressed buttons and dials.
Concave (Dish)
Inverts the gradient direction so the surface curves inward like a hollow dish or saucer. The rim facing the light source drops into shadow, while the inner well catches light reflections. Perfect for analog jog wheels.
Recessed (Inset)
Applies dual inset box-shadows to simulate a sunken chamber carved into the material plane. Essential for depressed active button states, search inputs, sliders tracks, and switch wells.
The WCAG Contrast & Accessibility Paradox
Because Neumorphic elements share their background color with the canvas, traditional boundary outlines disappear. Under WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast), user interface components must maintain an appropriate contrast ratio against adjacent colors.
- Always preserve high-contrast text: Use text with 4.5:1 or 7:1 contrast (our tool audits this in real time).
- Enable Specular Rim Bevel: A subtle 1px border provides essential edge definition on low-gamut displays.
- State Indication: Do not rely solely on inset shadow for active/disabled states; add color badges, toggle icons, or checkmarks.
- Focus Rings: Always include visible
:focus-visibleoutlines for keyboard navigation.
Mathematical Physics: Light Vector Trigonometry
Every natural shadow follows directional vector optics. Given an elevation distance $d$ and light source angle $\theta$:
The dark specular shadow is cast away from the illumination source, while the light highlight reflects towards it. In accordance with physical optics, the default blur radius is calculated as $blur = 2 \times distance$.
Frequently Asked Questions (FAQ)
Why must the parent background match the element color?
Neumorphism creates the visual illusion that the component is sculpted directly out of the background material plane. If the background colors differ, the element looks like a conventional flat card rather than an extruded surface.
How do I implement interactive click effects in CSS?
Style the normal state with extruded shadows, and use the :active pseudo-class to switch to box-shadow: inset ... with a smooth transition: box-shadow 0.15s ease.
Does this tool send any colors or assets to a remote server?
No. In accordance with ToolsAA privacy architecture, 100% of color trigonometry, luminance calculations, and code generation execute exclusively inside your local browser thread. Zero network packets are sent.
Can I use Neumorphism in Tailwind CSS?
Yes. You can either use arbitrary values like shadow-[9px_9px_18px_#bcc5d0,-9px_-9px_18px_#ffffff] or configure a named preset inside your tailwind.config.js file as provided in our code output tab.