Box shadow

La propiedad box-shadow de CSS proyecta una o varias sombras sobre la caja de un elemento HTML. Las sombras no ocupan espacio en el flujo del documento: no empujan a otros elementos ni alteran el layout, solo son un efecto visual.

¿Cuál es la sintaxis de box-shadow?

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

• offset-x / offset-y: desplazamiento horizontal y vertical en píxeles. Valores positivos mueven la sombra a la derecha y hacia abajo; negativos, a la izquierda y hacia arriba.
• blur-radius: radio de desenfoque. Con 0 la sombra es nítida; a partir de 8px empieza a difuminarse notablemente.
• spread-radius (opcional): expande (+) o contrae (-) la sombra respecto al tamaño del elemento. Con 0 sigue exactamente el contorno.
• color: cualquier valor CSS. Se recomienda rgba para controlar la opacidad y evitar sombras demasiado duras.

Ejemplo habitual en tarjetas:

.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

La sombra está desplazada 4 px hacia abajo, con 12 px de desenfoque y un negro al 15 % de opacidad. Sin desplazamiento horizontal, queda centrada y parece elevarse.

Sombras múltiples

Apila sombras separadas por coma. La primera se dibuja encima:

.boton {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.1);
}

Una sombra cercana y nítida más otra lejana y difusa dan sensación de profundidad real. Esta técnica la popularizó el sistema Material Design de Google y hoy es estándar en la mayoría de librerías de componentes.

Sombra interior (inset)

Añade inset al principio para proyectar la sombra hacia dentro del elemento:

.input:focus {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

El campo parece hundirse al recibir el foco, dando retroalimentación visual sin cambiar el border.

Errores comunes

• Animar box-shadow directamente: el repintado en cada frame sobrecarga la GPU. Usa opacity sobre un pseudoelemento con la sombra fija, o filter: drop-shadow().
• Confundir box-shadow con text-shadow: text-shadow actúa sobre los glifos del texto; box-shadow, sobre la caja rectangular (o con el contorno de border-radius) que lo contiene.
• Sombras con colores opacos: una sombra en #000000 puro resulta antinatural. Usa rgba(0, 0, 0, 0.15) o un tono oscuro del color principal del componente para que encaje en el diseño.