Generador CSS Box Shadow
¿Qué es el CSS Box Shadow?
La propiedad CSS box-shadow añade efectos de sombra alrededor del marco de un elemento. Las sombras pueden desplazarse, desenfocarse, extenderse, colorearse y establecerse como inset (sombra interior). Múltiples sombras separadas por comas pueden apilarse para efectos ricos. Este generador le permite construir sombras complejas de múltiples capas visualmente y copiar el CSS listo para pegar al portapapeles.
Cómo usar el Generador de Box Shadow
-
Ajuste los controles deslizantes de Offset X/Y, Blur y Spread para posicionar y dar forma a la sombra.
-
Haga clic en la muestra de color para elegir un color de sombra y use el control deslizante de Opacity para la transparencia.
-
Active 'Inset' para crear un brillo interior o un efecto de presión.
-
Haga clic en '+ Añadir capa' para apilar múltiples sombras.
-
Copie el CSS generado y péguelo en su hoja de estilos.
Preguntas Frecuentes
¿Cuál es la diferencia entre box-shadow y drop-shadow filter? box-shadow añade sombras alrededor del cuadro de borde rectangular del elemento y admite sombras internas. El CSS filter: drop-shadow() se aplica a la forma visual del elemento (incluida la transparencia), permitiéndole seguir contornos no rectangulares como PNGs con fondos transparentes.
¿Cómo creo un efecto de elevación de tarjeta Material Design? Apila dos sombras box-shadow: una sombra ambiental suave (gran desenfoque, baja opacidad, propagación leve) y una sombra clave (desenfoque más pequeño, opacidad más alta, desplazamiento direccional). Por ejemplo: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).
¿Afecta box-shadow al diseño de la página? No. box-shadow no afecta el tamaño o la posición del elemento en el flujo del documento. A diferencia del outline, no ocupa espacio de diseño y no moverá otros elementos.
¿Puedo animar box-shadow? Sí. box-shadow es animable con CSS transitions y animations. Para rendimiento, prefiere transicionar box-shadow solo cuando sea necesario — los navegadores no pueden acelerar cambios de box-shadow con GPU tan eficientemente como transform u opacity.
Keywords: generador CSS box shadow, box-shadow CSS, herramienta de sombra CSS, CSS drop shadow, sombra interior, sombra multicapa, CSS shadow en línea