¿Qué es Generador de degradados de malla?

Genera degradados de malla multicolor para fondos de sitios web, gráficos de redes sociales y diseños de interfaz. Elige los colores, posiciona los puntos de control y consigue degradados orgánicos que van más allá de los patrones lineales o radiales simples.

El lienzo superpone varios degradados radiales, uno por cada punto de control. Arrastra un punto para remodelar la mezcla, cambia su color con la muestra y el código se actualiza al instante. Hasta seis puntos mantienen el resultado equilibrado. Expórtalo como PNG o SVG en tamaños de banner como 1920x1080, copia el SVG directamente en Figma o toma el código en CSS, SCSS o Tailwind.

Cómo usar

1. Elige tus colores base haciendo clic en las muestras de color o ingresando valores hexadecimales. Agrega hasta 6 puntos de control de color.
2. Arrastra los puntos de control sobre el lienzo para cambiar el flujo del degradado.
3. Copia el código como CSS, SCSS o Tailwind, o descarga el degradado como PNG o SVG.

Cuándo usar

• Diseñar un fondo hero que no parezca una plantilla genérica.
• Hacer arte para tarjetas de producto o portadas de playlist sin usar fotos.
• Generar fondos de relleno para pantallas de carga y estados vacíos en apps.

Resultado

Un diseñador de interfaces crea un degradado de malla de púrpura a turquesa con 4 puntos de control para la sección hero de una página de aterrizaje, y luego copia el CSS para pegarlo directamente en su hoja de estilos.

Preguntas frecuentes

¿Cuál es la diferencia entre un mesh gradient y un degradado lineal?

Un degradado lineal mezcla dos colores en un solo eje. Un mesh gradient superpone varias manchas de color suaves, así el resultado se parece más a una aguada de acuarela que a una transición limpia. Cuesta más identificar el límite entre colores.

¿Por qué el CSS usa radial-gradient y no conic-gradient?

Los radial-gradient apilados tienen la mejor compatibilidad y se degradan limpiamente. El generador emite un radial-gradient por punto de control y los apila con background-image, así funciona en todos los navegadores modernos sin polyfills.

¿Mi mesh gradient se verá igual en Safari y Chrome?

Sí. La salida usa el radial-gradient estándar de CSS sin prefijos de navegador. Safari, Chrome, Firefox y Edge dibujan resultados idénticos. Navegadores muy viejos hacen fallback al primer color.

¿Cuántos puntos de control puedo usar?

Hasta seis. Añadir más suele enturbiar la mezcla en vez de enriquecerla. Dos o tres puntos dan degradados con estilo más gráfico; cuatro a seis producen aguadas más pictóricas.

¿Puedo exportar el degradado como SVG?

Sí. La exportación SVG arma el degradado con capas de radial-gradient apiladas, así que se ve en cualquier lugar donde funcionen los degradados CSS y se pega directamente en Figma como relleno de una forma. El degradado de malla SVG real de la especificación aún no se admite en ningún sitio, por eso este método apilado es la versión que de verdad funciona allá donde lo pegues.

Herramientas relacionadas