CSS Box Shadow: Guía Completa con Ejemplos
Domina la sintaxis box-shadow, capas múltiples, sombras internas y sistemas de elevación para diseño UI moderno.
Las sombras box son una de las propiedades CSS más versátiles. Una sombra bien elaborada puede hacer que cualquier elemento parezca anclado, elevado o interactivo.
La sintaxis box-shadow es engañosamente simple pero las posibilidades de diseño son vastas. Superponer múltiples sombras crea una profundidad más realista.
Sintaxis box-shadow
La sintaxis completa box-shadow es: box-shadow: offset-x offset-y blur-radius spread-radius color. Todos los valores excepto offset-x y offset-y son opcionales. Múltiples sombras se separan con comas.
Herramienta gratuita Generador de Box Shadow Crea sombras box CSS complejas con vista previa en vivoOffset X/Y, desenfoque, expansión, color
Offset-X es la distancia horizontal. Offset-Y es la distancia vertical. Blur-radius controla la suavidad. Spread-radius expande o contrae la sombra.
Sombras múltiples y capas
Apilar múltiples valores box-shadow crea efectos de profundidad más realistas. Una técnica común: combinar una pequeña sombra ambiente nítida con una sombra clave más grande y suave.
Herramienta gratuita Generador de Filtros CSS Aplica desenfoque, brillo, contraste y más con filtros CSSSombras internas
La palabra clave inset invierte la dirección de la sombra — aparece dentro del elemento en lugar de fuera. Las sombras internas se usan para: estados de botón presionado, biseles internos, anillos de foco de entrada.
Sistemas de elevación
Material Design 3 define niveles de elevación del 0 al 5 usando valores box-shadow. Cada nivel corresponde a un caso de uso: 0 para superficies planas, 1 para tarjetas, 2 para botones.
Técnica neumorphism
El neumorphism usa dos box-shadow en el mismo elemento: una sombra clara arriba a la izquierda y una oscura abajo a la derecha. El elemento parece extruirse del fondo.
Herramienta gratuita Generador de Glassmorphism Crea efectos UI de vidrio esmerilado con CSS backdrop-filter