Box Shadow Generator

A box-shadow layer is offset-x offset-y blur-radius spread-radius color, with an optional inset keyword in front (CSS Backgrounds and Borders Level 3, §7.2). The offsets move the shadow; a positive y moves it down. The blur radius softens the edge — the specification asks for a Gaussian blur whose standard deviation is half the radius, so the fade spans roughly the blur radius. The spread radius grows (positive) or shrinks (negative) the shadow's shape before blurring; a negative spread with a large blur gives the "floating" look without a halo at the sides. Inset shadows are drawn inside the box, above its background and below its content.

Layers are comma-separated and painted back to front, so the first layer in the list ends up on top. The page reports how far the combined shadow reaches beyond the box on each side — blur plus spread, shifted by the offset — as a guide for spacing and overflow; it is an approximation of the fade, not a hard edge. Lengths are written in px by default; rem or em divides by the base you set (16 px unless your root font size differs) so shadows scale with type. Zero lengths are written as a bare 0, as the grammar allows.

Each layer's colour is entered as a hex value with a separate opacity and written as rgba(r, g, b, a), so the alpha is visible in the output and easy to tune in a stylesheet. Shadows nearly always need transparency: a fully opaque grey looks painted on, while black at 8–25 % reads as a shadow on most backgrounds. The presets are starting points chosen by eye, not measurements; adjust them to your surface.

Rendering differs slightly between engines, especially for large blurs; check the real page. Text and image shadows use different properties (text-shadow, filter: drop-shadow) with their own grammar. The preview uses this site's background; your surface colour changes how the same shadow reads. Nothing you enter leaves the browser; the same four anonymous usage counts as the rest of the site apply.