Generador de fondos degradados en línea

Previsualiza en tiempo real degradados CSS, compatible con degradados lineales, radiales y cónicos, genera código y exporta imágenes 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

Configura el degradado y luego copia el código o exporta la imagen. Admite degradados lineales, radiales, cónicos, repetidos y paradas multicolor; los cambios se reflejan en la vista previa.

Configurar degradado

Elige primero el tipo de degradado y ajusta la dirección y las paradas de color. Se recomienda ordenar las paradas de menor a mayor.

Tipo de degradadoEl degradado cónico es ideal para ruedas de color y fondos circulares

Dirección y formaEl degradado lineal puede usar ángulo o direcciones rápidas

Ángulo lineal90°

Periodo de repetición32%

Forma radial

Rango de difusión

Periodo de repetición32%

Centro X50%

Centro Y50%

Ángulo inicial0°

Centro X50%

Centro Y50%

Repetir degradado Capa de luz suave Viñeta Textura fina

Nodos de colorAdmite 2-10 nodos, con opacidad y posición

Plantillas de ejemploÚsalas como punto de partida

Exportar código

Tras revisar la vista previa, copia CSS o exporta PNG, JPG, SVG, CSS y paquete de recursos.

Formato de códigoElige la declaración según el uso

Modo de código

Clase / variable

Incluir color de fondo de respaldo Comprimir código

Código CSS

Dimensiones de imagenEl tamaño personalizado se usará al exportar imagen y SVG

Tamaños predefinidos

Calidad JPG92%

Ancho (px)

Alto (px)

Descargar recursosEl paquete incluye CSS, SVG, PNG y ajustes JSON

Vista previa en vivo

Gradient Preview Se actualiza al cambiar parámetros

TipoLineal

Nodos de color2

Tamaño de exportación1920x1080

Longitud del código0

Instrucciones

Instrucciones de uso del software

Configurar el tipo de degradado: elige degradado lineal, degradado radial o degradado cónico. El lineal es adecuado para banners y fondos web, el radial para efectos de difusión desde el centro, y el cónico para anillos, ruedas de color y patrones decorativos.
Ajustar dirección y forma:
- Degradado lineal: puedes usar los botones de dirección o establecer una dirección de 0-360 grados con el control deslizante de ángulo.
- Degradado radial: puedes configurar círculo u óvalo, rango de difusión y posición X/Y del punto central.
- Degradado cónico: puedes configurar el ángulo inicial y la posición del punto central.
Configurar nodos de color: usa el selector de color, el campo HEX, el porcentaje de posición y los parámetros de transparencia para controlar cada nodo de color. Puedes añadir, eliminar, ordenar e invertir colores, además de distribuir los nodos uniformemente con un clic.
Usar opciones de efectos: puedes activar degradado repetido, capa de luz suave, viñeta y textura fina para que el fondo sea más adecuado para la primera pantalla de una web, tarjetas, pósteres y recursos de diseño.
Copiar y exportar: en “Exportación de código”, elige nombre de clase CSS, solo declaraciones o modo de variables CSS; puedes copiar el código CSS y también exportar archivos PNG, JPG, SVG, CSS y paquetes de recursos ZIP.
Guardar y compartir: en “Guardar y compartir”, guarda la configuración actual, genera un enlace para compartir o pega un código de degradado CSS existente para cargarlo en la herramienta y seguir editándolo.

Preguntas frecuentes

R: El degradado lineal transiciona en línea recta, ideal para fondos web, botones y banners; el degradado radial se expande desde un punto central, adecuado para efectos de foco y fondos con profundidad; el degradado cónico gira alrededor del centro, ideal para ruedas de color, anillos y efectos decorativos.

R: Haz clic en “Añadir color” para agregar nodos de color y luego configura el color, el porcentaje de posición y la transparencia de cada uno. La posición de los nodos afecta el rango de transición de color; también puedes usar “Distribuir uniformemente” para organizar rápidamente los nodos.

R: Los degradados repetidos son adecuados para crear fondos regulares como rayas, ondas y texturas circulares repetidas. Los degradados lineales y radiales pueden activar el modo de repetición; para los degradados cónicos, se recomienda controlar el efecto mediante nodos de color y ángulos.

R: Se pueden exportar archivos PNG, JPG, SVG y CSS, y también se puede descargar un paquete de recursos ZIP. El paquete incluye código CSS, archivos SVG, imágenes PNG y ajustes JSON, lo que facilita el archivo y la edición posterior.

R: Después de copiar el código CSS generado, pégalo en el archivo de estilos de la página web. La herramienta ofrece tres modos: nombre de clase CSS, solo declaración y variables CSS, para elegir según las prácticas del proyecto.

R: Sí. En el área “Importar CSS” de “Guardar y compartir”, pega el código linear-gradient, radial-gradient o conic-gradient y haz clic en “Cargar en la herramienta” para seguir ajustando colores, ángulos y posiciones.

R: No. La generación de degradados, la copia de código, el dibujo de imágenes y el empaquetado de recursos se realizan localmente, sin necesidad de subir el contenido del diseño al servidor.