Neumorphism (Soft UI) CSS Generator
The problem: Hand-calculating dual light and dark complementary ambient shadows for soft neumorphic interfaces is complex.
ASG Privacy VerifiedVerified
100% In-Browser Execution. Zero server uploads. Your data never leaves this tab — disconnect your internet and the tool keeps working.
Neumorphism (Soft UI) CSS Generator: the complete guide
The Neumorphism (Soft UI) CSS Box-Shadow Generator creates soft, extruded plastic and inset interface elements using dual light and dark drop shadows. Design flat, convex, concave, and pressed neumorphic cards and buttons with custom light source angles and surface colors.
The Physics of Neumorphic Dual Shadows
Neumorphism simulates physical surface extrusion from the background plane. Unlike traditional flat cards with dark drop shadows, neumorphism requires two complementary shadows: a lighter tint on the side facing the simulated light source (ambient reflection) and a darker shade on the opposite side (cast shadow).
Convex, Concave, and Pressed States
Flat neumorphic elements maintain a uniform surface color. Convex elements introduce subtle gradients that curve outward towards the viewer, concave surfaces simulate inward bowls, and pressed states switch to CSS `inset` box shadows to represent depressed tactile buttons.
Step by step: how to use Neumorphism Maker
- 1
Choose a base surface background color using the color picker.
- 2
Select a shape style: Flat, Convex, Concave, or Pressed.
- 3
Choose your light source angle (Top-Left, Top-Right, Bottom-Right, Bottom-Left).
- 4
Adjust the Distance Elevation and Blur Radius sliders to control 3D depth.
- 5
Click 'Copy CSS' to paste the complete `box-shadow` declaration into your stylesheets.
Security & privacy
Color calculations and CSS style generation execute 100% locally in your browser.