Stack multiple box-shadow layers with live preview — offset, blur, spread, color, opacity, and inset per layer. Drag handles to tune each shadow, switch the stage background to test on light or dark, and copy the rule. Includes neumorphism, glow, lifted-card, and material-tier presets.
The CSS box-shadow property accepts a comma-separated list of shadows, each with up to five values plus an optional inset keyword: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>. Positive Y offsets cast shadows below the element (gravity); negative offsets cast above. Blur softens the edge over a Gaussian-like falloff, while spread grows (or shrinks, when negative) the shadow before blurring. Browsers render the layers in source order — the first shadow listed sits on top. Realistic depth often combines two layers: a tight, near-opaque shadow for contact and a wider, lower-opacity shadow for ambient occlusion (the Material elevation pattern). inset reverses the geometry to draw the shadow inside the border-box, perfect for pressed buttons, neumorphism, and inner glow effects. Shadows never affect layout — for that, use filter: drop-shadow(), which respects transparent pixels but is more expensive to composite.