Generador de sombras multicapa CSS

En el mundo real, la luz no proviene de un único punto infinitesimal sin dispersión. Las fuentes de luz tienen volumen, lo que genera dos zonas diferenciadas: la umbra (sombra directa y nítida de contacto) y la penumbra (difusión suave y progresiva hacia el fondo). Una sola propiedad box-shadow en CSS produce un borde rígido y un degradado lineal artificial. Al combinar de 3 a 6 capas con desplazamientos y radios de desenfoque crecientes a menor opacidad, se reproduce fielmente la caída lumínica cuadrática inversa de la física óptica, logrando una sensación orgánica de profundidad y elevación.

El tercer valor de box-shadow corresponde al desenfoque (blur-radius): aplica un filtro gaussiano que difumina los contornos de la sombra hacia el exterior e interior sin alterar el tamaño original de la silueta. El cuarto valor es la extensión (spread-radius): expande (valores positivos) o contrae (valores negativos) el perímetro de la sombra antes de desenfocarla. En sombras multicapa avanzadas, aplicar una ligera extensión negativa (-1 px a -4 px) en las capas difusas evita que los laterales se oscurezcan en exceso, manteniendo la sombra compacta y aérea.

Existen dos formas idóneas de integrarlas: mediante una clase arbitraria directa aplicando corchetes (ejemplo: shadow-[0_2px_4px_rgba(0,0,0,0.05),0_8px_16px_rgba(0,0,0,0.08)]) o, de manera más limpia y mantenible, configurando la sombra en el archivo tailwind.config.js bajo el objeto theme.extend.boxShadow. De este modo puedes invocarla en cualquier componente mediante una clase semántica reutilizable como shadow-elevacion-suave o shadow-tarjeta-stripe.

Para elementos estáticos como tarjetas, modales o paneles, el impacto en la CPU y GPU es prácticamente inapreciable en dispositivos modernos, ya que los navegadores rasterizan y almacenan en caché la capa gráfica. No obstante, si se aplican sombras de muchas capas sobre elementos con animaciones continuas a 60 fps o durante el desplazamiento (scroll) en dispositivos de baja potencia, se recomienda limitar la sombra a 3 capas o aplicar will-change: transform / transform: translateZ(0) para promover el elemento a una capa de composición acelerada por hardware.

Sí. La propiedad text-shadow admite múltiples definiciones separadas por comas, igual que box-shadow. La única diferencia técnica es que text-shadow no admite el parámetro de extensión (spread) ni la palabra clave inset. Nuestra herramienta adapta automáticamente los cálculos al conmutar al modo de sombra de texto, eliminando la extensión y optimizando las distancias para una legibilidad tipográfica impecable.