Generador de CSS Box Shadow
Diseña box shadows multicapa visualmente y copia CSS listo para producción al instante.
¿Qué es?
El Generador de CSS Box Shadow es un editor visual gratuito para crear la propiedad `box-shadow` perfecta. En lugar de adivinar valores de offset y radio a mano, mueves controles deslizantes y ves el resultado en vivo. Puedes apilar múltiples capas de sombras y alternar entre modo normal e inset. Un clic copia el CSS completo listo para pegar.
Cómo usarla
- La tarjeta de vista previa muestra tu sombra en tiempo real. Empieza ajustando los controles de offset horizontal y vertical.
- Aumenta el control de Desenfoque para una sombra suave difusa o mantenlo bajo para un aspecto de borde duro.
- Elige un color con el selector y establece la opacidad para mezclar la sombra con el fondo.
- Activa "Inset" para invertir la sombra hacia el interior del elemento, creando un efecto presionado.
- Haz clic en "+ Agregar Capa" para apilar sombras adicionales. Al terminar, haz clic en "Copiar CSS".
Por qué usarla
Escribir CSS box-shadow a mano es lento y propenso a errores. Esta herramienta ofrece un editor visual en tiempo real para diseñar sombras con confianza, incluyendo composiciones multicapa avanzadas. El código exportado es limpio y listo para usar.
Preguntas frecuentes
¿Cuántas capas de sombra puedo agregar?
Puedes agregar hasta 5 capas independientes. CSS admite nativamente múltiples valores box-shadow como lista separada por comas.
¿Qué hace el interruptor "Inset"?
Las sombras inset aparecen dentro del elemento en lugar de fuera. Son perfectas para crear efectos hundidos o grabados.
¿Puedo exportar el resultado como imagen?
Sí. Haz clic en "Exportar PNG" para guardar una captura de pantalla de la tarjeta de vista previa con tu sombra aplicada.
¿Esta herramienta también admite text-shadow?
Esta herramienta se centra específicamente en la propiedad CSS `box-shadow`. Para sombras de texto, busca un generador dedicado.
¿Qué unidades usa el CSS exportado?
Todos los valores se exportan en píxeles (px). Si necesitas unidades relativas, puedes escalar manualmente los valores exportados.