Understanding CSS Box-Shadow Spread Radius

The CSS box-shadow property allows developers to add depth and dimension to UI components by rendering shadows around elements. Within its declaration, the spread radius is an optional fourth length parameter that directly controls the expansion or contraction of the shadow's footprint. This article explains how the spread radius functions, its role in the box-shadow syntax, how positive and negative values affect rendering, and how it differs from the blur radius.

Syntax and Placement

The box-shadow property accepts up to four length values, an optional color, and an optional inset keyword:

box-shadow: [offset-x] [offset-y] [blur-radius] [spread-radius] [color];

When four length values are supplied, the spread radius is always the fourth value. If omitted, the spread radius defaults to 0.

/* Example: 0px X-offset, 4px Y-offset, 8px blur, 2px spread */
.card {
  box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.2);
}

How Spread Radius Works

While the offset-x and offset-y values position the shadow and the blur-radius softens its edges, the spread radius alters the overall dimensions of the shadow shape before any blur is applied.

  • Positive Values: Setting a positive value (e.g., 4px) causes the shadow to expand outward in all directions by that amount. This makes the shadow physically larger than the element casting it.
  • Negative Values: Setting a negative value (e.g., -4px) causes the shadow to contract inward in all directions. This shrinks the shadow's dimensions, making it smaller than the element.
  • Zero Value (0): The shadow maintains the exact same dimensions as the element's border box before blurring.

Spread Radius vs. Blur Radius

It is common to confuse the spread radius with the blur radius, but they serve two distinct geometric functions:

  • Blur Radius: Determines how soft, feathered, or diffused the edge of the shadow appears. It does not change the core size of the shadow source; it only controls the transition gradient from shadow color to transparency.
  • Spread Radius: Scales the underlying shape of the shadow. Increasing spread without blur results in a solid, expanded duplicate of the element behind it, similar to an outline or border.

Common Use Cases

  1. Simulating Outlines and Borders: By setting both offsets and the blur radius to 0, a positive spread radius acts as a faux border that does not affect the document's layout or box model sizing:

    box-shadow: 0 0 0 3px #0070f3;

  2. Constrained Natural Shadows: When casting directional shadows with a large blur, the shadow can bleed out from edges where it is not wanted. Applying a negative spread radius shrinks the shadow base, ensuring the blur only emerges prominently on the side dictated by the offsets:

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);