CSS box-shadow generator

How does the CSS box-shadow property work?

A shadow is two offsets, an optional blur, an optional spread and a color, with the inset keyword for a shadow inside the box: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) moves the shadow 4 px down and blurs it over 12 px. A positive x offset moves it right and a positive y offset moves it down; negative values move it left and up.

The blur softens the edge: the spec asks browsers to approximate a Gaussian blur with a standard deviation of half the blur radius, so a larger blur makes a bigger, lighter shadow. Negative blur values are invalid, and a browser ignores a declaration it can't parse, which is why this tool refuses them. The spread expands the shadow's shape in all directions, or contracts it when negative; the blur then softens the edge of that shape, and the shadow's corner radii grow with the spread so it keeps the box's shape.

Several shadows are written as a comma-separated list. They are drawn front to back: the first one is on top and each later one is layered behind it, which is how a tight dark shadow and a wide soft one combine into one realistic edge. A shadow follows the element's border-radius.

The color here is a HEX code plus an opacity, written as rgba() with the opacity as an alpha from 0 to 1. The same value is also given with 8-digit HEX and as a Tailwind arbitrary class, where each space becomes an underscore.

box-shadow: [inset] <x> <y> [<blur ≥ 0> [<spread>]] <color>, …

shadow 1 is drawn on top of shadow 2, and so on
alpha = opacity % ÷ 100        (15% → 0.15)
Tailwind: shadow-[0_4px_12px_rgba(0,0,0,0.15)]   (spaces → _)