CSS Box Shadow Generator

The CSS box-shadow property creates shadow effects on HTML elements — beneath cards, buttons, modals, and containers. Getting the values right by hand requires trial and error. The visual generator lets you drag sliders and see the result instantly, then copy the exact CSS. Shadow parameters: Horizontal offset (X) — positive values move shadow right; negative move left. 0 centers the shadow horizontally. Vertical offset (Y) — positive values move shadow down; negative move up. 0 centers the shadow vertically. Blur radius — 0 produces a hard-edged shadow. Higher values produce a softer, more diffuse shadow. Most card shadows use 8-24px blur. Spread radius — positive values expand the shadow beyond the element's bounds; negative values contract it. Spread 0 keeps the shadow the same size as the element. Color — choose any color including semi-transparent RGBA colors. Most realistic shadows use dark colors with low opacity (rgba(0,0,0,0.15) to rgba(0,0,0,0.4)). Inset — places the shadow inside the element rather than outside. Used for pressed-button effects, inner glow, and recessed panel styles. Multiple shadows: Add multiple shadow layers stacked together. Modern card designs often combine a close, dark shadow (for definition) with a distant, very soft shadow (for ambient depth). Example two-layer card shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) Live preview shows the shadow on a card element with adjustable background color.