Generador de Sombra CSS
Generador de sombras CSS en línea gratuito. Crea sombras complejas y en capas con vista previa en tiempo real.
Generador de Sombra CSS
Generador de sombras CSS en línea gratuito. Crea sombras complejas y en capas con vista previa en tiempo real.
Acerca de CSS box-shadow
Crea capas de sombra separadas por comas
Cada capa se convierte en una entrada box-shadow con inset opcional, desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión y color. Varias capas se unen en la misma declaración, siguiendo la sintaxis estándar de CSS box-shadow.
Los colores de caja son ajustes de vista previa
Los colores de fondo y caja ayudan a comprobar cómo funciona la sombra sobre superficies claras o con color. No se incluyen en el fragmento copiado, que solo contiene la declaración box-shadow generada.
El desenfoque suaviza los bordes; la expansión cambia el tamaño
Mantén fijos el desplazamiento, el color y la expansión, y aumenta el desenfoque de 0 a 20 px para ver cómo un borde nítido se vuelve suave. Restablece el desenfoque a 0 y aumenta la expansión de 0 a 10 px: la sombra crece por todos los lados, pero conserva el borde nítido. CSS aplica la expansión antes del desenfoque; usa la primera para ajustar el tamaño de la sombra y el segundo para suavizarla.
Reduce una sombra exterior con expansión negativa
Desactiva la sombra interior, fija el desplazamiento horizontal en 0, el vertical en 12 px y el desenfoque en 16 px, y compara una expansión de 0 con -8 px. La expansión negativa reduce la sombra antes de desenfocarla. Al desplazarla hacia abajo, una mayor parte queda oculta detrás de la caja y el efecto se concentra debajo, aunque no elimina por completo la sombra de los otros lados. Un valor muy negativo puede hacerla desaparecer; la opción de sombra interior cambia el efecto al interior de la caja.
La primera sombra del mismo tipo se dibuja encima
Cuando se superponen sombras exteriores, la primera de la lista separada por comas se dibuja encima. Esta herramienta las exporta en el orden mostrado y añade las nuevas capas al final. Prueba una sombra pequeña y definida en la primera capa y otra más amplia y suave en la segunda. Si la segunda apenas se ve, reduce la opacidad o la expansión de la primera. Las sombras interiores se dibujan sobre el fondo de la caja y las exteriores detrás de ella; el orden de la lista no convierte una sombra exterior en interior.
Preguntas Frecuentes
Preguntas y respuestas frecuentes sobre este tema.
¿Qué propiedades puedo personalizar?
Puede personalizar el desplazamiento horizontal y vertical, el radio de desenfoque, el radio de expansión, el color de la sombra y activar sombras interiores.
¿Puedo agregar múltiples sombras?
Sí, agregue múltiples capas de sombra para efectos de profundidad complejos. Cada capa puede tener sus propias configuraciones de desplazamiento, desenfoque, expansión y color.
¿Genera código compatible con todos los navegadores?
Sí, la propiedad CSS box-shadow estándar funciona en todos los navegadores modernos sin prefijos de proveedor.
¿Mis datos se envían a algún servidor?
No, la generación de CSS box-shadow se ejecuta completamente en su navegador. Sus configuraciones de sombra se procesan localmente con JavaScript y nunca salen de su dispositivo.