The box-shadow CSS property adds one or more shadow effects around an element's frame. The full syntax follows this exact order:

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

Mathematical representation of a single shadow layer:

$$S_i = f(h_i, v_i, b_i, s_i, c_i, inset_i)$$

• Horizontal Offset (h): $$h \in \mathbb{Z}$$ — Positive values place the shadow on the right side; negative values on the left.
• Vertical Offset (v): $$v \in \mathbb{Z}$$ — Positive values push the shadow below the element; negative values above.
• Blur Radius (b): $$b \in \mathbb{R}^+$$ — Controls edge softness via a Gaussian blur algorithm. 0 produces a sharp edge.
• Spread Radius (s): $$s \in \mathbb{Z}$$ — Positive values expand the shadow uniformly before blurring; negative values contract it.
• Color (c): Any valid CSS color (HEX, RGBA, HSL). The alpha channel controls opacity: $$\alpha \in [0, 1]$$.
• Inset: $$inset \in \{0, 1\}$$ — When set, the shadow renders inside the element's border-box.

Multiple Layer Composition:

For n shadow layers the total box-shadow is the union:

$$\text{box-shadow} = \bigcup_{i=1}^{n} S_i = S_1,\; S_2,\; \dots,\; S_n$$

Blur Distance Calculation:

The visual extent of a shadow can be estimated as:

$$\text{total-extent} = |h| + |v| + s + 2b$$

This accounts for offset distance, spread expansion, and blur radius on both sides of the element.