Generador de Box Shadow
Crea valores box-shadow CSS y sombras de caja con un generador de box-shadow en línea, vista previa en vivo y código listo para copiar.
Descripción de concepto
CSS box-shadow para usar en tarjetas, botones y modales
Ajusta rápidamente la profundidad y los límites de componentes combinando offset-x, offset-y, blur, spread, color e inset.
El box-shadow permite controlar la profundidad visual de UI con offset, blur, spread, color y la opción inset para separar capas y dar profundidad.
Esta herramienta sirve para generar valores de sombra y validar contraste y legibilidad en fondos claros/oscuros antes de aplicarlos en cards, botones y modales reales.
Escenarios recomendados
Úsalo cuando necesites jerarquía visual en card hover, énfasis de botones, overlays de modal o alertas tipo toast.
Guía de parámetros
El offset x/y decide la dirección, blur decide la suavidad, spread decide la extensión, color define la tonalidad y inset aporta textura interna.
Checklist antes de aplicar
Comprueba el fondo real de la página, el modo oscuro, el contraste con texto de botones y la coherencia con los tokens del sistema de diseño (radius, spacing, tono).
La salida prioriza vista previa rápida y copiado; valida de nuevo en UI real porque el render puede cambiar por modo, fondo y tokens.
Generador de Box Shadow Área de trabajo del generador de box shadow
Cómo usar
- 1 Añade una capa de sombra y ajusta desplazamiento X/Y, blur y expansión en el generador.
- 2 Cambia el color, la opacidad y la opción inset mientras revisas la vista previa.
- 3 Copia el código CSS box-shadow generado y úsalo en tu hoja de estilos.
Casos de uso comunes
- Crear box-shadow CSS para tarjetas con un CSS shadow generator
- Ajustar varias capas de sombra CSS en un box shadow generator
- Copiar valores de sombra inset
Preguntas frecuentes
¿Qué valores de box-shadow puedo ajustar?
Puedes ajustar desplazamiento X/Y, blur, expansión, color, opacidad y modo inset, además de añadir o quitar varias capas de sombra CSS.
¿Puedo usar directamente el CSS box-shadow generado?
Sí. El CSS box-shadow terminado aparece debajo de la vista previa, y el botón de copia lo envía al portapapeles.
¿La vista previa se actualiza al cambiar los valores?
Cuando ajustas controles deslizantes o valores de color, el cuadro de vista previa y la salida CSS se actualizan de inmediato.