CSS box shadow generator.

Worked example: a soft two-layer card shadow

The page opens with two layers on a 12px-radius box. Layer 1 is 0 1px 3px at 20% black: a tight contact shadow. Layer 2 is 0 10px 15px -3px at 10% black: a wide, soft shadow whose negative spread pulls it in so it does not poke out past the sides. The generated CSS is:

.box {
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2),
    0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

How the output is built

Each layer is written as inset? offset-x offset-y blur spread colour, and layers are joined with commas. The first layer in the list is drawn on top. Blur defaults to 0 (a hard edge) and cannot be negative. A positive spread makes the shadow larger than the box on all sides; a negative spread makes it smaller. The spread value is omitted from the output when it is 0. A fully opaque colour is written as #rrggbb; anything else as rgba(r, g, b, a) so the opacity is explicit. An inset layer is drawn inside the border, above the background and below the content.

Border radius. The horizontal corners are ordered top-left, top-right, bottom-right, bottom-left. The output uses the shortest equivalent form: one value when all four match, two values when top-left equals bottom-right and top-right equals bottom-left, three values when only top-right and bottom-left match, otherwise four. If any vertical radius differs from its horizontal one, a slash separates the horizontal list from the vertical list, which produces elliptical corners; for example 50px / 25px. In percent, radii are relative to the box width (horizontal) and height (vertical), so 50% on a square makes a circle. A shadow follows the box's border radius.

Sources (checked 2026-10-01): MDN: box-shadow (syntax, spread, blur, layer order, inset), MDN: border-radius (1 to 4 value order, slash syntax, percentages).