CSS box-shadow: De los conceptos básicos a hermosos efectos de UI

¿Solo copias y pegas el box-shadow?

CSS box-shadow es una de esas propiedades que la mayoría de los desarrolladores aprenden lo justo para salir del paso. Copias un valor de las especificaciones de diseño o encuentras uno en Stack Overflow, y funciona. Pero cuando entiendes qué hace cada parámetro, desbloqueas un rango sorprendentemente amplio de efectos — desde la apenas perceptible sombra de elevación en una tarjeta moderna hasta una UI neumórfica completa y botones de neón brillantes.

Para experimentar mientras lees, el generador CSS Box Shadow de ToolPal ofrece un editor visual en tiempo real con exportación CSS con un clic.

---

La sintaxis explicada

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

Cada parámetro con precisión:

offset-x — Desplazamiento horizontal de la sombra. Positivo → derecha; negativo → izquierda.

offset-y — Desplazamiento vertical. Positivo → abajo (estándar para fuente de luz arriba); negativo → arriba.

blur-radius — Desenfoque de la sombra. 0 da un borde nítido; valores altos crean sombras más suaves y difusas.

spread-radius — Expande o contrae la sombra. Valores positivos hacen la sombra más grande que el elemento; negativos la encogen. Opcional (predeterminado: 0).

color — Color de la sombra. Usa rgba() o hsla() para controlar la transparencia. El negro puro (#000) suele quedar sucio.

Una sombra mínima:

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

---

La palabra clave inset

Añadir inset al principio crea una sombra interior en lugar de exterior:

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

Las sombras interiores son perfectas para:

• Campos de texto y textareas (aspecto hundido, "presionado")
• Estados de botón presionado
• Estados "presionados" en neumorfismo

---

Sombras múltiples: capas para el realismo

La función más infrautilizada de box-shadow es apilar varias sombras separadas por comas:

.realistic-card {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 4px 8px rgba(0, 0, 0, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.04);
}

Este enfoque por capas imita cómo funcionan las sombras reales. Una sola sombra grande suele parecer plana o artificial. Varias sombras pequeñas con opacidad decreciente producen algo que realmente parece tridimensional.

---

Efectos UI prácticos

1. Elevación de tarjeta (estilo Material Design)

El Material Design de Google popularizó el concepto de elementos UI en diferentes "elevaciones" — mayor elevación significa sombra más grande y difusa.

/* Estado normal */
.card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
  transition: box-shadow 0.2s ease;
}

/* Estado hover */
.card:hover {
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
}

2. Sombras suaves (diseño minimalista moderno)

La tendencia reciente es sombras más suaves y difusas con baja opacidad:

.soft-card {
  background: white;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.04);
}

Para sombras coloreadas que combinan con tu marca:

.indigo-card {
  background: white;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
}

3. Efectos de brillo para modo oscuro

Los brillos son simplemente sombras sin desplazamiento, con gran desenfoque y color saturado:

.glow-button {
  background: #6366f1;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
}

.glow-button:hover {
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.8);
}

Para un efecto neón, apila varios brillos con colores diferentes:

.neon-element {
  box-shadow:
    0 0 5px #fff,
    0 0 20px #ff00ff,
    0 0 60px #ff00ff;
}

4. Neumorfismo

El neumorfismo (también llamado "Soft UI") fue una tendencia de diseño que se popularizó alrededor de 2020. Usa dos sombras — una clara y una oscura — en un elemento que comparte el mismo color de fondo que su contenedor:

body {
  background: #e0e5ec;
}

.neumorphic-card {
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow:
    8px 8px 16px #b8c0cc,
    -8px -8px 16px #ffffff;
}

Estado presionado:

.neumorphic-button:active {
  box-shadow:
    inset 4px 4px 8px #b8c0cc,
    inset -4px -4px 8px #ffffff;
}

Limitaciones del neumorfismo: Solo funciona en fondos grises. Tiene problemas de accesibilidad reales — el bajo contraste dificulta distinguir elementos interactivos.

5. Sombras nítidas (diseño retro/audaz)

Eliminar el desenfoque da una sombra nítida y desplazada — un efecto retro clásico que vuelve a estar de moda en diseños gráficos audaces:

.retro-card {
  background: white;
  border: 2px solid #000;
  box-shadow: 6px 6px 0 #000;
}

.retro-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 #000;
}

6. Reemplazo del anillo de foco

box-shadow se usa a menudo como alternativa más elegante al contorno predeterminado del navegador para estados de foco:

.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
}

---

Errores comunes

Usar negro puro (#000) directamente: Casi siempre se ve mal. Empieza con rgba(0, 0, 0, 0.1) a rgba(0, 0, 0, 0.3).

Solo un gran desenfoque, una capa: Una sola sombra 0 20px 60px rgba(0,0,0,0.3) a menudo parece una mancha. Apila 2 a 4 capas.

Ignorar el color de fondo: El neumorfismo se rompe si el color de fondo del elemento no coincide con el contenedor.

No explotar el spread-radius negativo: Un spread negativo encoge la sombra y puede hacerla visible solo en un lado:

/* Sombra solo abajo */
.bottom-shadow {
  box-shadow: 0 8px 8px -6px rgba(0, 0, 0, 0.3);
}

---

Consideraciones de rendimiento

box-shadow se renderiza fuera de la capa de composición del navegador, desencadenando repaints cuando cambia. Para la mayoría de las UIs está bien. Pero animar sombras en muchos elementos simultáneamente o en superficies grandes puede causar problemas de rendimiento.

Usa filter: drop-shadow() para aceleración GPU:

/* Versión filter (composición GPU posible) */
.card {
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.2));
}

filter: drop-shadow() tiene una ventaja importante: funciona en formas irregulares y elementos transparentes (SVGs, PNGs con transparencia). Desventaja: no soporta inset, sombras múltiples por coma, ni spread-radius.

---

Hoja de referencia rápida

/* Elevación de tarjeta sutil */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

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

/* Multicapa realista */
box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);

/* Efecto de brillo */
box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);

/* Neumorfismo */
box-shadow: 8px 8px 16px #b8c0cc, -8px -8px 16px #ffffff;

/* Sombra retro nítida */
box-shadow: 4px 4px 0 #000;

/* Anillo de foco */
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);

/* Solo sombra abajo */
box-shadow: 0 8px 8px -6px rgba(0, 0, 0, 0.3);

/* Estado interior presionado */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);

---

Conclusión

box-shadow es suficientemente simple para aprender los conceptos básicos en cinco minutos y suficientemente profundo para seguir revelando trucos años después. Los puntos clave:

1. Apila varias sombras en lugar de una sola grande
2. Usa rgba() con baja opacidad — no negro puro
3. inset para campos y estados presionados
4. Spread negativo para sombras direccionales
5. Para animaciones críticas, considera filter: drop-shadow()

La mejor manera de interiorizar estos patrones es experimentar. El generador CSS Box Shadow es el entorno perfecto para ello.