¿Qué es Generador de sombra de caja CSS?

Generador de sombra de caja CSS gratuito en línea. Ajusta el desplazamiento, desenfoque, propagación y color con controles visuales y genera código CSS al instante.

La propiedad CSS box-shadow es una de las herramientas más versátiles del kit de un diseñador web, capaz de añadir profundidad, jerarquía e interés visual a los elementos de la interfaz. CSS Box Shadow Generator proporciona una interfaz visual para crear código CSS de box-shadow, con control total sobre cada parámetro y una vista previa interactiva que se actualiza en tiempo real.

El generador expone cinco parámetros ajustables mediante deslizadores. X Offset (desplazamiento X) mueve la sombra horizontalmente (los valores positivos la desplazan a la derecha y los negativos a la izquierda). Y Offset (desplazamiento Y) la mueve verticalmente (los valores positivos hacia abajo y los negativos hacia arriba). Blur Radius (radio de desenfoque) controla lo suaves que son los bordes de la sombra — cero produce una sombra nítida, mientras que los valores más altos crean un efecto más suave y difuso. Spread Radius (radio de expansión) expande o contrae el tamaño de la sombra sin afectar al desenfoque. El selector de color establece el color de la sombra con control de opacidad a través del canal alfa.

Una tarjeta de vista previa en vivo muestra el efecto de cada ajuste inmediatamente. La tarjeta de vista previa está estilizada con un fondo blanco y esquinas redondeadas para simular un componente de interfaz real, de modo que puedas ver exactamente cómo se verá la sombra en tus elementos de interfaz reales. Se incluyen seis sombras preestablecidas para una selección rápida: sutil, media, intensa, difusa, interior (inset) y elevada.

El código CSS de box-shadow generado se muestra en un formato listo para copiar. La salida admite la sintaxis abreviada completa, incluida la palabra clave inset para las sombras interiores. Se pueden combinar múltiples valores de box-shadow copiando la salida y pegando manualmente varias declaraciones. La herramienta también valida que la sintaxis sea correcta, por lo que cada copia es una declaración CSS válida.