Anatomía de box-shadow: desplazamiento, desenfoque y expansión

Los cuatro números de box-shadow no son cuatro ajustes independientes: son dos operaciones geométricas y una convolución, aplicadas en un orden concreto. Saber en qué orden se aplican explica por qué un spread negativo con blur produce un halo estrecho, por qué el borde de la sombra empieza dentro de la caja, y por qué duplicar el radio de desenfoque no duplica la zona difuminada.

Los cuatro valores

box-shadow: <offset-x> <offset-y> <blur> <spread> <color>;

Solo los dos desplazamientos son obligatorios. El desenfoque y la expansión valen cero si faltan, y el color sin especificar es currentColor, cosa que se olvida y produce sombras del color del texto en componentes que cambian de color.

El orden de las longitudes es fijo y no se puede reordenar: la tercera longitud siempre es el desenfoque y la cuarta siempre la expansión. El color y la palabra inset, en cambio, pueden ir antes o después del grupo de longitudes.

.a { box-shadow: 0 4px 12px rgb(0 0 0 / 0.2); }
.b { box-shadow: 0 4px 12px -4px rgb(0 0 0 / 0.2); }
.c { box-shadow: rgb(0 0 0 / 0.2) 0 4px 12px; }   /* color delante: valido */

El desenfoque no admite valores negativos; la declaración se descarta entera. La expansión sí.

Las sombras no ocupan espacio de layout. No desplazan a nada, no generan barras de desplazamiento y no cuentan para el tamaño del elemento. Esa es su diferencia esencial con un borde, y la razón de que se usen para anillos de foco.

Qué es el radio de desenfoque

Aquí está el número que más se malinterpreta. El radio de desenfoque no es la distancia que se difumina hacia fuera: es la anchura total de la transición, centrada en el borde de la sombra.

La especificación lo define así: para un borde recto y largo, el desenfoque debe producir una transición de color cuya longitud sea igual al radio de desenfoque, perpendicular al borde de la sombra y centrada en él, que vaya desde el color completo en el extremo interior hasta transparente en el exterior.

Es decir, con blur: 20px la transición ocupa veinte píxeles: diez hacia dentro de la sombra y diez hacia fuera. La sombra “crece” solo la mitad del radio que escribes.

En implementación, eso es una convolución con una gaussiana de desviación típica igual a la mitad del radio. blur: 20px es una gaussiana de sigma 10. Esa equivalencia es la que hay que tener en la cabeza cuando comparas una sombra con un desenfoque hecho de otra forma, y vuelve a aparecer al comparar box-shadow con drop-shadow(), donde la convención no es la misma.

Consecuencia práctica inmediata: para que una sombra se vea a cierta distancia hay que escribir el doble. Una sombra que quieras que se extienda unos doce píxeles más allá de la caja necesita blur: 24px, no 12.

El spread y las esquinas

La expansión modifica la forma de la sombra antes de desenfocarla. Un valor positivo infla el rectángulo en todas las direcciones; uno negativo lo encoge.

El orden importa: primero se toma la caja de borde, después se aplica el spread, después se desplaza, y por último se desenfoca. Por eso 0 4px 12px -4px produce una sombra que asoma solo por abajo: el spread negativo la mete cuatro píxeles por dentro por los cuatro lados, y el desplazamiento vertical la vuelve a sacar solo por uno.

Ese patrón —desplazamiento hacia abajo compensado con spread negativo— es el que produce la sombra que parece nacer del propio elemento en vez de rodearlo, y es la base de los sistemas de elevación decentes.

Sobre esquinas redondeadas, el spread ajusta los radios con una regla que sorprende: un radio de cero se queda en cero, y un radio distinto de cero crece con la expansión. Es decir, una caja de esquinas rectas con spread grande produce una sombra de esquinas rectas, no redondeadas; y una caja con border-radius: 4px y spread: 10px produce una sombra con radio de unos catorce.

La consecuencia visible es que la sombra de una caja poco redondeada se ve más redondeada que la caja, proporcionalmente. Con radios pequeños y spreads grandes conviene mirarlo, porque el desajuste se nota.

Varias sombras y dónde se pintan

box-shadow acepta una lista separada por comas. La primera de la lista se pinta encima, igual que las capas de fondo.

.anillo-doble {
  box-shadow:
    0 0 0 2px #1e1e2e,
    0 0 0 4px #89b4fa;
}

Ese ejemplo enseña el uso de la sombra sin desenfoque como anillo: 0 0 0 Npx color dibuja un contorno de N píxeles que sigue el border-radius y no ocupa layout. Apilando dos con radios crecientes tienes un anillo con separación, que es el patrón canónico de un :focus-visible visible sobre cualquier fondo.

El orden de pintado respecto al elemento es:

Las sombras exteriores se pintan debajo del fondo del elemento. Por eso una sombra exterior nunca se ve a través de un fondo semitransparente propio: está detrás.

Las sombras interiores se pintan encima del fondo y debajo del borde. Por eso una sombra inset sí tapa el fondo, y por eso el borde sigue viéndose por encima de ella.

text-shadow tiene la misma sintaxis con dos diferencias: no acepta spread ni inset. Sus tres longitudes son desplazamiento horizontal, vertical y desenfoque, con la misma relación de sigma igual a la mitad.