box-shadow

box-shadow añade sombras a la caja de un elemento. Una sombra de caja es una copia de la forma del elemento (su rectángulo, posiblemente redondeado por border-radius) desplazada en alguna dirección, difuminada, expandida o contraída, y con un color. La sombra se pinta debajo del elemento y no ocupa espacio en el layout: no desplaza a los elementos vecinos ni modifica el box model. Esto la diferencia de border que sí ocupa espacio.

La propiedad acepta hasta seis valores por sombra: los dos desplazamientos obligatorios, el radio de difuminado, el radio de expansión, el color, y la keyword opcional inset. Acepta también múltiples sombras separadas por coma, lo que permite efectos de capas que van desde sombras suaves y realistas hasta bordes sintéticos o indicadores de foco complejos.

En la práctica, box-shadow se usa principalmente para tres cosas: simular elevación (el efecto de que una tarjeta “flota” sobre la página), indicar estado interactivo (hover, foco), y como técnica de borde sintético que no afecta el layout (el mismo truco que usa el indicador de foco del outline).

Cómo funciona

El navegador calcula la forma del elemento (su rectángulo, aplicando border-radius si existe) y proyecta una copia en la posición definida por offset-x y offset-y. Luego aplica el difuminado (blur-radius) que extiende los bordes de esa copia hacia fuera, y el radio de expansión (spread-radius) que agranda o achica la forma antes de difuminarla. El resultado se pinta en el color especificado.

Sin inset, la sombra se proyecta hacia el exterior del elemento. Con inset, la sombra se proyecta hacia el interior — el elemento parece estar “hundido”. Múltiples sombras separadas por coma se apilan: la primera en la lista queda encima.

Sintaxis

/* Formato: [inset] offset-x offset-y [blur] [spread] [color] */

/* Sombra exterior básica */
.tarjeta { box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15); }

/* Sin difuminado (sombra dura) */
.retro   { box-shadow: 6px 6px 0px #1e3a5f; }

/* Sin desplazamiento (resplandor uniforme) */
.glow    { box-shadow: 0 0 16px rgba(13, 148, 136, 0.6); }

/* Sombra interior */
.hundido { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2); }

/* Múltiples sombras */
.elevado {
  box-shadow:
    0px 2px 4px rgba(0, 0, 0, 0.1),
    0px 8px 16px rgba(0, 0, 0, 0.15);
}

Valores

offset-x y offset-y (obligatorios)

Desplazan la sombra desde la posición original del elemento.

• offset-x: positivo → derecha, negativo → izquierda.
• offset-y: positivo → abajo, negativo → arriba.
• 0 0 produce una sombra centrada que aparece como un resplandor uniforme.

.abajo       { box-shadow: 0 4px 8px rgba(0,0,0,.2); }  /* sombra debajo */
.arriba      { box-shadow: 0 -4px 8px rgba(0,0,0,.2); } /* sombra arriba */
.diagonal    { box-shadow: 4px 4px 8px rgba(0,0,0,.2); }
.glow-uniforme { box-shadow: 0 0 16px rgba(13,148,136,.5); }

blur-radius (opcional, default 0)

El radio de difuminado. 0 produce una sombra con bordes duros y definidos. A mayor valor, más difusa y suave. Solo acepta valores positivos o cero.

.dura  { box-shadow: 4px 4px 0 rgba(0,0,0,.3); }    /* blur: 0 → borde duro */
.suave { box-shadow: 0 4px 20px rgba(0,0,0,.15); }  /* blur grande → muy difusa */

spread-radius (opcional, default 0)

Expande o contrae la forma de la sombra antes de difuminarla. Positivo → sombra más grande que el elemento; negativo → más pequeña.

/* Técnica: spread negativo para sombra con "sangría" */
.recortada { box-shadow: 0 8px 16px -4px rgba(0,0,0,.2); }

/* Borde sintético con spread (no ocupa layout) */
.borde-sintetico { box-shadow: 0 0 0 2px #0d9488; }

El truco 0 0 0 Npx color con spread puro (sin offset ni blur) produce un “borde” perfecto que no afecta el layout — es la técnica que muchos sistemas de diseño usan para indicadores de foco o selección activa.

color (opcional)

Cualquier valor de color CSS. Si se omite, el valor por defecto es currentColor (el color del texto del elemento).

.oscura  { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.coloreada { box-shadow: 0 4px 16px rgba(13, 148, 136, 0.4); }
.opaca  { box-shadow: 4px 4px 0 #1e3a5f; }

Para sombras realistas, colores con rgba() con baja opacidad (.1 a .3) dan resultados mucho más naturales que colores sólidos. Para sombras de UI coloridas (glow, foco), colores del sistema de diseño con transparencia media.

inset

La keyword inset al inicio de la declaración invierte la dirección: la sombra se proyecta hacia el interior del elemento. inset 0 2px 4px parece como si la caja estuviera hundida.

.input-hundido { box-shadow: inset 0 2px 4px rgba(0,0,0,.1); }
.presionado    { box-shadow: inset 0 4px 8px rgba(0,0,0,.2); }
.foco-interior { box-shadow: inset 0 0 0 2px #0d9488; } /* borde interior */

Múltiples sombras

Separadas por coma, se apilan de delante hacia atrás (la primera sombra queda encima).

.tarjeta-compleja {
  box-shadow:
    0 1px 2px rgba(0,0,0,.08),   /* sombra cercana */
    0 4px 12px rgba(0,0,0,.12),  /* sombra media */
    0 16px 32px rgba(0,0,0,.08); /* sombra lejana */
}

Ejemplo realista

/* Escala de elevación (sistema de Material Design / similar) */
.nivel-0 { box-shadow: none; }
.nivel-1 { box-shadow: 0px 2px 4px rgba(0,0,0,.10); }
.nivel-2 { box-shadow: 0px 4px 12px rgba(0,0,0,.15); }
.nivel-3 { box-shadow: 0px 8px 24px rgba(0,0,0,.20); }

/* Input con estado de foco */
.input:focus {
  outline: none; /* ⚠ solo si se reemplaza por algo visible */
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.35);
}

/* Botón con elevación en hover */
.boton { box-shadow: 0 2px 4px rgba(0,0,0,.1); transition: box-shadow .2s; }
.boton:hover { box-shadow: 0 4px 12px rgba(0,0,0,.2); }

Cuándo usarlo

Notas, gotchas e interacción

• La sombra no ocupa espacio en el layout. No desplaza elementos vecinos ni cambia el tamaño computado del elemento. Si una sombra grande se superpone con otro elemento, el otro no se mueve.
• box-shadow sigue la forma de border-radius. Si el elemento tiene border-radius: 50%, la sombra también será circular. La forma de la sombra siempre sigue la forma del elemento.
• inset y el exterior no se mezclan sin lista múltiple. Una sola declaración box-shadow es exterior o interior. Para tener ambas, se usan múltiples sombras: box-shadow: 0 4px 8px rgba(0,0,0,.2), inset 0 1px 2px rgba(255,255,255,.3).
• Spread negativo para sombras más naturales. 0 8px 16px -4px rgba(0,0,0,.2) produce una sombra que parece más física: más estrecha en la base del elemento y más difusa lejos. La técnica spread negativo (siempre -blur/2 a -blur/4) es el truco de sombras “de producción”.
• box-shadow no se recorta con overflow: hidden. La sombra se pinta fuera del box del elemento, por lo que un contenedor con overflow: hidden puede cortar la sombra de los hijos. Si esto ocurre, el patrón es agregar padding al contenedor para dar espacio a la sombra.

Vigente / legacy

box-shadow es CSS3 (Baseline widely). El prefijo -webkit-box-shadow fue necesario circa 2009-2011 y hoy es legacy. La sintaxis sin prefijos es la correcta.