🌑Generador de sombreado CSS Box Shadow

¿Qué es el Generador de CSS Box Shadow?

Una buena sombra da profundidad y jerarquía visual a tarjetas, botones y modales — pero ajustar manualmente desplazamiento, desenfoque, expansión y opacidad hasta que se vea "natural" lleva tiempo. Este generador de box shadow tiene un editor visual con vista previa en vivo y presets de "elevación" inspirados en Material Design, y en el Modo 2 permite apilar varias sombras en capas para lograr efectos de profundidad más realistas, sin tener que ajustar cada valor por prueba y error directamente en el navegador.

¿Cómo se estructura box-shadow?

X e Y mueven la sombra horizontal y verticalmente; Blur (desenfoque) suaviza sus bordes — a mayor valor, más difusa; Spread (expansión) agranda o reduce la sombra completa antes de aplicar el desenfoque; y el color normalmente lleva algo de transparencia para que se integre naturalmente con el fondo.

Guía paso a paso: cómo generar tu sombra CSS

1) Ajusta el "Desplazamiento X" e "Y" para definir la dirección de la sombra. 2) Ajusta el "Radio de Desenfoque" para controlar la suavidad de sus bordes. 3) Elige el color y la opacidad de la sombra. 4) Opcionalmente, ajusta el "Radio de Expansión" o activa el modo "Inset" para una sombra interior. También puedes partir directamente de un preset de elevación (Sutil, Media, Alta, Interior) en vez de ajustar cada valor manualmente. Si necesitas combinar varias sombras en un mismo elemento para un efecto más realista, cambia al Modo 2: Sombras en Capas.

¿Por qué usar varias sombras en capas?

Una sola sombra tiende a verse plana o artificial. Las sombras reales tienen múltiples componentes de luz —una sombra de contacto cercana y nítida, y una sombra ambiental más difusa y extendida— y combinar 2-3 capas de box-shadow (separadas por comas) reproduce ese efecto de forma mucho más creíble. Es exactamente la técnica que usa Material Design para sus niveles de "elevación": cuanto más "elevado" un elemento, más capas y mayor desenfoque.

¿Qué es una sombra "inset"?

Añadiendo la palabra clave inset antes de los valores, la sombra se dibuja hacia el interior del elemento en lugar de proyectarse hacia afuera — útil para simular un hueco tallado, un campo de formulario presionado, o un efecto de profundidad invertida.

Casos de uso: dónde aplicar sombras con criterio

Las sombras se usan para separar visualmente tarjetas de contenido de su fondo, para dar sensación de elevación a botones flotantes y menús desplegables, para indicar el estado "activo" o "en foco" de un elemento interactivo, y para simular profundidad en modales que deben destacar claramente sobre el resto de la página. Si tus tarjetas también tienen esquinas redondeadas, combina esta herramienta con el generador interactivo de código CSS Border Radius para mantener un lenguaje visual coherente entre bordes y sombras.

Errores comunes al diseñar sombras CSS

El error más habitual es usar una opacidad demasiado alta o un color negro puro sin transparencia, dando un resultado duro y poco natural — las sombras profesionales suelen usar opacidades bajas (10-25%). Otro error frecuente es confundir blur con spread: el desenfoque difumina los bordes sin cambiar el tamaño base de la sombra, mientras que la expansión agranda o reduce toda la forma antes del desenfoque. Y un tercer error: apilar demasiadas capas de sombra con mucho desenfoque en elementos animados, lo que puede afectar al rendimiento en dispositivos de gama baja.

Compatibilidad de navegadores y niveles de elevación

box-shadow, incluidas las sombras en capas separadas por comas y la palabra clave inset, tiene soporte universal en todos los navegadores modernos desde hace más de una década, sin necesidad de prefijos de proveedor. Un consejo profesional habitual: define tus niveles de elevación como variables CSS reutilizables (--shadow-sm, --shadow-md, --shadow-lg) en lugar de repetir los valores completos en cada componente — así, si más adelante decides ajustar la intensidad global de las sombras de tu interfaz, solo necesitas cambiar la definición de la variable una vez. Otro consejo: al animar una sombra en hover, anima también ligeramente el transform: translateY() del elemento junto con el cambio de sombra — combinar ambos efectos refuerza mucho más la sensación de elevación que cambiar solo la sombra por sí sola.

Preguntas Frecuentes (FAQ)