Generador de Box Shadow CSS Online
Crea sombras CSS con vista previa en tiempo real. Múltiples capas, inset, blur y spread.
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.2);
Por qué usarlo
Sombras CSS perfectas sin adivinar valores
Vista previa instantánea
Ajusta offset, blur, spread y color con sliders. El resultado es inmediato.
Múltiples capas
Apila sombras para efectos realistas. Añade o elimina capas fácilmente.
Sombras inset
Alterna entre sombras externas e internas con un clic.
Sin instalaciones
Todo en el navegador. No necesitas herramientas de diseño externas.
Cómo funciona
Tres pasos, sin complicaciones
Configura tu sombra
Ajusta offset X, offset Y, blur radius, spread radius y color con los controles visuales. Activa 'inset' para sombras internas.
Añade múltiples sombras
La propiedad box-shadow acepta múltiples sombras separadas por comas. Combina capas para crear efectos realistas de elevación o profundidad.
Copia el CSS
El código box-shadow se genera en tiempo real. Copia la propiedad completa lista para tu hoja de estilos.
Preguntas frecuentes
¿Tienes dudas?
Sí. La propiedad box-shadow acepta una lista de sombras separadas por comas: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24). Las sombras se renderizan en orden: la primera de la lista aparece encima. Esta característica es fundamental para crear sombras realistas con múltiples capas, siguiendo el principio de que las sombras naturales tienen un componente de umbra (oscuro y definido) y penumbra (difuso y amplio).
La palabra clave 'inset' cambia la sombra de exterior a interior. En lugar de proyectarse hacia afuera del elemento, la sombra aparece dentro de sus bordes, creando la ilusión de que el elemento está hundido o presionado. Se usa para simular botones pulsados, campos de input activos y efectos de relieve invertido (como en el diseño neumorphism).
Las box-shadows son renderizadas durante la fase de 'paint' del pipeline de renderizado del navegador y pueden desencadenar repaints costosos cuando se animan. A diferencia de transform y opacity (que operan en la capa de composición sin repaint), animar box-shadow puede causar caídas de frames. La recomendación del equipo de Chrome es usar filter: drop-shadow() en su lugar para elementos que necesitan sombras animadas, o usar pseudo-elementos con opacity animada para simular el efecto con mejor rendimiento.
text-shadow se aplica únicamente al texto renderizado del elemento, siguiendo los contornos de cada glifo. box-shadow se aplica al modelo de caja del elemento (border-box), ignorando completamente el contenido. Si aplicas box-shadow a un span de texto, la sombra será rectangular (o con border-radius si el elemento lo tiene). Si quieres sombra que siga la forma exacta del contenido (incluyendo texto transparente o imágenes con transparencia), usa filter: drop-shadow().
Las sombras realistas combinan al menos dos capas: una sombra directa de alta opacidad y pequeño blur para la umbra, y una sombra ambiental de baja opacidad y gran blur para la penumbra. El sistema de elevación de Material Design de Google define 24 niveles de elevación, cada uno con valores específicos de box-shadow. Por ejemplo, la elevación 8 (tarjetas flotantes) usa: box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12).
Box-shadow CSS: renderizado de sombras, neumorphism y Material Design
La propiedad box-shadow fue introducida en CSS3 (módulo Backgrounds and Borders, W3C) y alcanzó soporte completo sin prefijos vendor en 2012. Antes de CSS3, los desarrolladores simulaban sombras con imágenes PNG de 9-slice (nine-patch), una técnica costosa en ancho de banda y mantenimiento. La sintaxis de box-shadow define, en orden: offset-x, offset-y, blur-radius, spread-radius y color, con la palabra clave opcional 'inset'. El parámetro spread (extensión) es único de box-shadow y no tiene equivalente en filter: drop-shadow() ni text-shadow.
El renderizado de sombras en navegadores modernos utiliza capas de composición (compositor layers). Cuando un elemento tiene box-shadow, el navegador lo promueve a su propia capa de pintura (paint layer) para poder renderizar la sombra de forma independiente. Esto tiene implicaciones en el consumo de memoria de GPU: cada capa adicional ocupa VRAM. En dispositivos con VRAM limitada (móviles de gama baja), el uso excesivo de box-shadows puede causar pérdida de frames. La alternativa filter: drop-shadow() utiliza el pipeline de filtros CSS, que en Chrome es procesado por la GPU de forma más eficiente, aunque su comportamiento difiere en elementos con border-radius.
El neumorphism (o neomorfismo), tendencia de diseño UI que surgió viralmente en diciembre de 2019 tras una publicación de Alexander Plyuto en Dribbble, se basa exclusivamente en box-shadows para crear la ilusión de elementos extruidos del fondo. La receta típica combina dos sombras: una clara (offset positivo, como si la luz viniera de arriba-izquierda) y una oscura (offset negativo). El sistema de elevación de Material Design de Google, documentado en material.io, define 24 niveles de elevación con valores de box-shadow calculados matemáticamente para simular luz ambiental y luz directa de forma consistente en toda la interfaz.