Generador de fondos con degradado animado CSS

Crea fondos degradados dinámicos en línea, con múltiples colores, direcciones de animación y ajustes preestablecidos, y genera código CSS con un clic.

Informe de error

Modo de ejecución en navegador: Tus datos se procesan en tu navegador y no se suben al servidor.

Velocidad y estabilidad: La velocidad de procesamiento depende de tu dispositivo y navegador. Para lotes grandes, la versión de escritorio puede ser más estable.

Cargando herramienta, espera...

Si la herramienta en línea no carga o no se ejecuta, prueba la herramienta de escritorio. https://tools.yikeaigc.com/

Uso de herramientas

Volver a la versión anterior

Elige colores, ajusta la animación y copia o descarga el código. Los ajustes predefinidos pueden usarse como ejemplos o modificarse en colores, paradas, dirección, velocidad y uso de salida. Todas las vistas previas, generación y ajustes guardados se hacen en esta página.

Vista previa en vivo CSS Keyframes Texto / Borde / Fondo Ajustes guardables

Cantidad de colores-

Tipo de animación-

Duración-

Uso de salida-

Ajustes de color

Es más rápido empezar con un ejemplo. Las paradas de color influyen en el ritmo de la transición; se recomienda conservar 2-6 colores.

Ejemplos Al hacer clic se sobrescriben los colores actuales

Base del degradado Lineal para fondos web, radial para foco, cónico para bordes o insignias

Tipo de degradado

Ángulo del degradado135°

135°

Centro radial / cónico

Paradas de color Mantén 2 colores; puedes usar hasta 8

Parámetros de animación

Se recomienda una velocidad lenta para fondos de página. Para suavizar el movimiento, activa el código compatible con movimiento reducido.

Tipo de animación Elige otra lógica de Keyframes

Dirección del movimiento Afecta los fotogramas clave de background-position

Velocidad y bucle Cuanto mayor sea el fondo, más se moverán los colores

Duración de la animación10s

10s

Tamaño de fondo400%

400%

Curva de animación

Bucle infinito Reproducir ida y vuelta Pausar al pasar el cursor Compatible con movimiento reducido

Generar y exportar

Tras definir el nombre de clase y el uso, copia el CSS al archivo de estilos del proyecto y añade la clase al elemento objetivo.

Ajustes de aplicación Una misma paleta puede generar efectos de fondo, texto o borde

Nombre de clase CSS

Uso de salida

Altura mín. del contenedor (px)

Radio de esquina (px)

Ancho del borde (px)

Fondo interior del borde

Código CSS generado

HTML de ejemplo

Vista previa en vivo

Animated Gradient Al ajustar colores, dirección y velocidad, el efecto se actualiza al instante. Ideal para hero web, zonas de botones, landing pages y tarjetas visuales. CSS Ready

Tipo de degradado-

Orientación-

Tamaño-

Nombre de clase-

Instrucciones

Instrucciones de uso del software

Elegir combinación de colores: en “Configuración de colores”, haz clic en un esquema de ejemplo, o añade, elimina y ajusta manualmente los colores y los puntos de parada.
Configurar el tipo de degradado: elige un degradado lineal, radial o cónico, y ajusta el ángulo y la posición central según sea necesario.
Configurar parámetros de animación: en “Parámetros de animación”, configura el modo de flujo, la dirección del movimiento, la duración, el tamaño del fondo, la curva de animación y el modo de repetición.
Seleccionar el uso de salida: en “Generar y exportar”, elige contenedor de fondo, texto con degradado o borde con degradado, y configura parámetros como el nombre de la clase CSS, las esquinas redondeadas y el borde.
Previsualizar el efecto: a la derecha puedes cambiar entre los modos de vista previa de fondo, tarjeta, texto y borde; confirma el resultado antes de generar el código.
Copiar o descargar el código: haz clic en “Copiar CSS”, “Copiar HTML” o “Descargar CSS” para aplicar el código a los elementos de la página.
Guardar configuración: haz clic en “Guardar configuración” para conservar los parámetros actuales y continuar editando la próxima vez.

Preguntas frecuentes

R: Copia el código CSS en el archivo de estilos y luego añade el nombre de la clase del HTML de ejemplo al elemento en el que quieras mostrar el degradado.

R: Los degradados lineales son adecuados para fondos de página y banners; los radiales son ideales para efectos de foco y difusión suave; los cónicos son adecuados para bordes, insignias y efectos visuales con sensación de rotación.

R: Puedes aumentar el tamaño del fondo, añadir más colores, ajustar los puntos de parada de color o elegir modos de animación como flujo diagonal o flujo de respiración.

R: Sí. En el uso de salida, selecciona “Texto con degradado” y la herramienta generará código CSS que incluye background-clip:text.

Respuesta: Se puede usar normalmente en fondos de páginas generales. Si la página tiene muchas animaciones, se recomienda aumentar la duración de las animaciones, reducir la cantidad de colores y activar el código de compatibilidad para reducir los efectos dinámicos.