Generador de Sombra CSS Box Shadow
Generador gratuito de sombra CSS en línea con vista previa en vivo. Ajusta desplazamiento, desenfoque, expansión, color y opacidad fácilmente.
Shadow List
Generated CSS
Cómo funciona
- Abre el generador y verás inmediatamente una vista previa en vivo de la sombra del cuadro.
- Ajusta los controles deslizantes de desplazamiento horizontal y vertical para posicionar la sombra.
- Modifica el radio de desenfoque y la extensión para controlar la suavidad y el tamaño de la sombra.
- Elige el color y la opacidad que mejor se adapten a tu diseño.
- Copia el código CSS generado y pégalo directamente en tu hoja de estilos.
Ejemplo
Entrada: Horizontal: 4px, Vertical: 8px, Desenfoque: 12px, Extensión: 1px, Color: #3366cc, Opacidad: 0.6
Resultado: box-shadow: 4px 8px 12px 1px rgba(51, 102, 204, 0.6);
FAQ
Sí, el Generador de CSS Box Shadow es completamente gratuito y no requiere registro ni cuenta.
Tus datos están completamente seguros. Todo el procesamiento ocurre en el lado del cliente, en tu navegador. No se envían datos a ningún servidor.
Sí, CSS admite múltiples valores de box-shadow separados por comas. Genera cada sombra y combina los valores en tu CSS.
Sí, la propiedad box-shadow es compatible con todos los navegadores modernos sin necesidad de prefijos de proveedor.
Sí, añadiendo la palabra clave 'inset' a la propiedad box-shadow, la sombra se aplica hacia el interior del elemento.