Sombra actual
La sombra y el CSS se actualizan al instante.
Tarjeta de ejemplo
Usa esta vista para revisar profundidad, suavidad y direccion.
Box shadow listo para copiar
Ajusta la sombra visualmente y copia la sintaxis completa para CSS.
Sombra
--
CSS
--
Generador de box shadow
Crea sombras CSS, ajusta offsets, blur, spread y opacidad, y copia el box-shadow listo para usar.
Ajusta una sombra CSS con controles simples
Conviene para tarjetas, modales, paneles y cualquier componente que necesite profundidad o separacion del fondo.
Casos de uso
Cuando sirve un generador de box shadow
Interfaces y tarjetas
Ayuda a crear sombras suaves o profundas para bloques, cards y paneles.
Botones y elementos flotantes
Sirve para revisar como cambia la sensacion visual al mover offset, blur y spread.
Sistemas de diseno
Encaja cuando quieres probar variaciones de sombra antes de fijar un token o un estilo reutilizable.
Preguntas frecuentes
Dudas comunes sobre box shadow
Funciona sin plugins ni uploads?
Si. Toda la vista previa y el calculo ocurren en el navegador.
Puedo generar sombras inset?
Si. Solo activa la opcion inset para cambiar el tipo de sombra.
Sirve para copiar CSS listo?
Si. La herramienta muestra la sintaxis completa de box-shadow para pegarla directamente.
Puedo cambiar color y opacidad?
Si. Puedes ajustar ambos valores y ver el resultado en tiempo real.
Sigue explorando