CSS Box Shadow Generator (with live preview)

The five shadow parameters

X offset: horizontal displacement. Positive shifts the shadow right, negative left. For sun-from-upper-left lighting (the typical UI assumption), a small positive X simulates light from upper-left.

Y offset: vertical displacement. Positive shifts the shadow down, simulating a light source above. Almost all UI shadows use positive Y.

Blur radius: how soft the shadow's edge is. 0 = sharp edge (rare). 8-30px is typical for cards and buttons. Higher values create dreamy, soft shadows.

Spread: extends or shrinks the shadow uniformly. Positive values make the shadow larger than the element; negative shrinks it. Negative spread combined with offset creates a 'lifted' effect.

Color/opacity: shadows are usually black with low opacity (10-30%). Colored shadows are trendy but harder to use well. Match your background's value range — too-dark shadows on dark UIs disappear, too-light shadows on light UIs lack contrast.

Inset shadows

An inset shadow is drawn inside the element instead of outside. Used for: pressed-button states, sunken input fields, neumorphic '3D pushed-in' effects.

Inset shadows respect the element's border radius and ignore overflow. They're useful for adding visual depth to flat UI elements without changing the actual layout.

Neumorphism and the 'soft UI' trend

Neumorphism (popular 2020-2022) uses two opposing shadows — one light, one dark — to make elements appear extruded from a same-colored background. Our 'Neumorphic' preset shows a single dark shadow; for full neumorphism, combine with a light inset shadow on the opposite side: 'inset -8px -8px 20px rgba(255,255,255,0.5), 8px 8px 20px rgba(0,0,0,0.12)'.

Note: pure neumorphism has accessibility issues — the lack of contrast makes elements hard to distinguish. Modern designs use it sparingly, often combined with traditional shadows.