Guía Completa de CSS Box Shadow: Domina las Sombras

Las sombras son esenciales en el diseño web moderno para crear profundidad y jerarquía visual. La propiedad box-shadow de CSS es tu mejor aliada para lograr esto.

Sintaxis Básica

La sintaxis básica de box-shadow es:

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

• offset-x: Desplazamiento horizontal.
• offset-y: Desplazamiento vertical.
• blur-radius: Cuánto se difumina la sombra.
• spread-radius: Cuánto crece o decrece la sombra.
• color: El color de la sombra.

Creando Realismo

Para sombras realistas, evita el negro puro (#000). Usa colores oscuros con transparencia, como rgba(0, 0, 0, 0.2).

Sombras Suaves (Neumorfismo, Glassmorfismo)

Las tendencias modernas utilizan múltiples sombras superpuestas para crear efectos más suaves y naturales.

/* Ejemplo de sombra suave */
box-shadow: 
  0 4px 6px -1px rgba(0, 0, 0, 0.1), 
  0 2px 4px -1px rgba(0, 0, 0, 0.06);

¿Necesitas visualizar tus sombras antes de escribir código? Usa nuestro Generador de Box Shadow gratuito para experimentar visualmente.