CSS Box Shadow: Guia Completa con Ejemplos

Entendiendo Box Shadow

La propiedad CSS box-shadow agrega efectos de sombra alrededor del marco de un elemento. Es uno de los efectos visuales mas utilizados en la web: tarjetas, botones, modales y barras de navegacion la usan en millones de sitios.

Una sola declaracion box-shadow puede transformar un diseno plano en algo que se siente estratificado y tactil. Las sombras crean profundidad, guian la mirada del usuario y establecen jerarquia visual sin agregar marcado adicional.

La propiedad ha sido soportada por todos los navegadores principales desde 2011 — sin necesidad de prefijos de proveedor. Funciona en cualquier elemento de bloque o inline-block y puede combinarse con border-radius para efectos de sombra redondeada.

Desglose de Sintaxis

La sintaxis completa de box-shadow es:

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

• offset-x: Distancia horizontal. Los valores positivos empujan la sombra a la derecha, los negativos a la izquierda.
• offset-y: Distancia vertical. Los valores positivos empujan la sombra hacia abajo, los negativos hacia arriba.
• blur-radius: Opcional. Cuanto mayor es el valor, mas suave y difusa es la sombra. Por defecto 0 (borde nitido).
• spread-radius: Opcional. Los valores positivos expanden la sombra, los negativos la contraen. Por defecto 0.
• color: Cualquier color CSS valido. Usar rgba() o hsla() con transparencia es el enfoque mas comun para sombras naturales.
• inset: Palabra clave opcional que hace que la sombra aparezca dentro del elemento.

Ejemplo: box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.15); crea una sombra sutil desplazada 4px a la derecha y 6px hacia abajo con un desenfoque de 12px.

Patrones Comunes de Sombra

Elevacion Material Design

El Material Design de Google usa sombras superpuestas para indicar niveles de elevacion:

/* Elevacion 1 */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

/* Elevacion 3 */
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

Sombra Sutil para Tarjetas

El patron mas popular para tarjetas de contenido: una sombra apenas visible que eleva la tarjeta del fondo.

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

Efecto de Boton Presionado

Combina box-shadow con :active para simular una pulsacion fisica:

.btn { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.btn:active { box-shadow: 0 1px 2px rgba(0,0,0,0.1); transform: translateY(2px); }

Neumorfismo

El estilo neumorfico usa dos sombras — una clara y una oscura — para crear un aspecto suave y extruido:

box-shadow: 8px 8px 16px #d1d1d1, -8px -8px 16px #ffffff;

Sombras Multiples

Puedes apilar multiples sombras separandolas con comas. La primera sombra listada se renderiza encima. Las sombras superpuestas lucen mucho mas realistas que una sola sombra porque la luz real crea sombras ambientales suaves ademas de sombras directas.

box-shadow:
0 1px 1px rgba(0,0,0,0.08),
0 2px 2px rgba(0,0,0,0.06),
0 4px 4px rgba(0,0,0,0.04),
0 8px 8px rgba(0,0,0,0.02);

Este enfoque por capas distribuye la sombra a traves de multiples distancias. El resultado es una sombra fluida y organica que se acerca al comportamiento real de la luz.

Sombras Internas (inset)

Agregar la palabra clave inset invierte la sombra al interior del elemento. Esto se usa comunmente para campos de entrada, botones presionados y contenedores empotrados.

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

Las sombras internas crean la ilusion de que el elemento esta hundido en la pagina. Una tecnica popular para campos de texto combina una sombra interna sutil con un anillo de color en el foco:

input:focus {
box-shadow: inset 0 1px 3px rgba(0,0,0,0.08), 0 0 0 3px rgba(59,130,246,0.3);
outline: none;
}

Consejos de Rendimiento

• No animes box-shadow directamente. Cambiar box-shadow provoca un repaint en cada frame. En su lugar, usa un pseudo-elemento con la sombra objetivo y anima su opacidad.
• Manten el radio de desenfoque razonable. Un desenfoque de 100px crea una zona enorme que el navegador debe calcular. Los valores bajo 30px generalmente estan bien.
• Usa will-change con moderacion. Agregar will-change: box-shadow promueve el elemento a su propia capa, lo que ayuda a la animacion pero aumenta el uso de memoria.
• Considera drop-shadow para formas irregulares. Para elementos no rectangulares, filter: drop-shadow() sigue el canal alfa mientras que box-shadow siempre envuelve el cuadro delimitador.

Genera CSS de sombra listo para produccion con nuestro Generador de Box Shadow. Ajusta desplazamientos, desenfoque, extension y color visualmente, luego copia el codigo.