La propiedad CSS box-shadow añade uno o más efectos de sombra alrededor del marco de un elemento. La sintaxis completa sigue este orden exacto:

box-shadow: [offset-x] [offset-y] [radio-desenfoque] [radio-extensión] [color] [inset];

Representación matemática de una capa de sombra:

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

• Desplazamiento horizontal (h): $$h \in \mathbb{Z}$$ — Valores positivos colocan la sombra a la derecha; negativos a la izquierda.
• Desplazamiento vertical (v): $$v \in \mathbb{Z}$$ — Valores positivos empujan la sombra hacia abajo; negativos hacia arriba.
• Radio de desenfoque (b): $$b \in \mathbb{R}^+$$ — Controla la suavidad de los bordes mediante un algoritmo de desenfoque gaussiano. 0 produce un borde nítido.
• Radio de extensión (s): $$s \in \mathbb{Z}$$ — Valores positivos expanden la sombra uniformemente antes del desenfoque; negativos la contraen.
• Color (c): Cualquier color CSS válido (HEX, RGBA, HSL). El canal alfa controla la opacidad: $$\alpha \in [0, 1]$$.
• Interior (inset): $$inset \in \{0, 1\}$$ — Cuando se establece, la sombra se renderiza dentro del borde del elemento.

Composición de múltiples capas:

Para n capas de sombra, el box-shadow total es la unión:

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

Cálculo de la extensión del desenfoque:

La extensión visual de una sombra se puede estimar como:

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

Esta fórmula tiene en cuenta la distancia de desplazamiento, la expansión de extensión y el radio de desenfoque en ambos lados del elemento.