Los mesh gradients han pasado de tendencia pasajera a recurso visual estándar en hero web y branding. Suaves, orgánicos, multicolor: dan profundidad sin usar una foto real y encajan con el dopamine design y el glassmorphism que dominan 2026.
Te he verificado uno a uno 15 generadores y fuentes gratis para conseguirlos, organizados por tipo: herramientas online, packs descargables y código CSS puro. También te cuento qué formatos elegir y cómo no comerte el rendimiento de tu web.
Qué es un mesh gradient exactamente
Un mesh gradient define varios puntos de color en posiciones concretas y los fusiona en transiciones orgánicas multidireccionales. A diferencia de un degradado lineal clásico, que va de un color A a un color B en lÃnea recta, el mesh tiene múltiples focos. Crea esa sensación de «neblina de color» tan tÃpica del hero web de 2026.
Generadores online verificados (8)
He probado y comprobado cada uno de estos ocho a fecha de hoy. Todos funcionan sin instalar nada.
1. MagicPattern Mesh Gradient Tool
Mi favorito: colocas los puntos de color, ajustas ruido y exportas en segundos, sin registro obligatorio. Exporta en SVG, PNG y JPG, asà que te sirve tanto para web como para print. Su única limitación real es que no exporta código CSS directo, asà que si lo quieres animado tendrás que pasarlo por otra herramienta.
2. Mesher, de CSS Hero
Gratis y pensado justo para lo contrario: generar el mesh directamente como código CSS, apilando degradados radiales semitransparentes. Si vas a maquetar el fondo sin depender de una imagen, es tu herramienta.
3. Colorffy Mesh Generator
Mismo enfoque de degradados radiales apilados, con una interfaz distinta y guardado del diseño en la propia URL para compartirlo. La versión gratuita cubre de sobra un fondo suelto; las exportaciones avanzadas (wallpapers, tokens de app) quedan en su plan Pro de pago.
4. Meshy (meshgradient.in)
Generador rápido a partir de una paleta de 4 colores. Ajustas resolución y descargas el PNG directamente, sin pasos intermedios. Bueno cuando ya tienes la paleta decidida y solo quieres el resultado.
5. Meshgradient.com
Funciona con shaders en vez de degradados apilados: haces clic para añadir puntos y arrastras para deformar el efecto. El resultado tiene un aspecto más fluido y menos «plano» que el resto de la lista.
6. Better Gradient
100% gratis, sin registro y sin lÃmite de gradientes. Es el que más formatos cubre de todos: PNG, WebP, SVG o CSS directo, según lo que necesites en cada proyecto.
7. FWD Tools Mesh Gradient Generator
Arrastras «manchas» de color sobre el lienzo, al estilo de los fondos que hicieron populares Stripe y Linear. Gratis, con 6 presets de partida y exportación en SVG, PNG o CSS.
8. MSHR
Aplicación web gratuita con dos modos: navegar por una colección ya generada de mesh gradients en CSS puro, o crear el tuyo con su editor. Útil si prefieres partir de algo ya hecho y solo ajustar colores.
Packs y fuentes descargables (7)
Si prefieres partir de algo ya montado en vez de generar el tuyo, estas fuentes tienen packs y colecciones verificadas.
- Unblast: pack de 100 mesh gradients gratis, en JPG, PNG, EPS, AI y Sketch, con licencia de uso personal y comercial.
- Vecteezy: colección de vectores de mesh gradient. La licencia gratuita pide atribución al autor, salvo que tengas cuenta Pro.
- Figma Community: busca «mesh gradient» directamente en el buscador de la comunidad. Hay archivos gratuitos activos como 100+ Free Mesh Gradients e Ingradients, listos para duplicar en tu propio archivo.
- Dribbble: filtra por «mesh gradient freebie». Un ejemplo real que sigue circulando es el Free Gradient Mesh Pack de LS.Graphics.
- LottieFiles: si necesitas el mesh animado en vez de estático, tienen una sección de animaciones de mesh gradient gratuitas en formato Lottie.
- GitHub: para perfil más técnico, el proyecto open source meshgrad genera mesh gradients en CSS por código, sin depender de ningún servicio externo.
- Behance: busca «mesh gradient free» directamente en el buscador. Es más irregular que Dribbble, pero de vez en cuando aparecen packs completos que no están en ningún otro sitio.
Tip: si buscas mesh gradients premium con calidad cinematográfica y licencia comercial resuelta de partida, Envato Elements tiene packs grandes pensados para web y branding.
Cómo crear un mesh gradient con CSS puro
TodavÃa no existe una propiedad CSS nativa para esto. Hay una propuesta abierta en el grupo de trabajo de CSS del W3C para un mesh gradient real, pero sigue sin implementarse en ningún navegador. Mientras tanto, se simula apilando varios radial-gradient:
.mesh-bg {
background:
radial-gradient(circle at 20% 30%, #ff6b9d, transparent 50%),
radial-gradient(circle at 80% 20%, #c084fc, transparent 50%),
radial-gradient(circle at 50% 80%, #fbbf24, transparent 50%),
#ffe4f1;
}
Si quieres profundizar en la sintaxis de degradados en CSS, tengo un artÃculo dedicado a crear degradados en CSS paso a paso.
Animar este fondo con scroll-driven animations o con una animación CSS normal crea heros con mucho movimiento. Y sin un solo kilobyte de imagen de por medio.
Casos de uso reales
- Hero web: fondo de bienvenida en SaaS y landings premium.
- Cards destacadas: tarjetas con fondo mesh detrás de contenido importante.
- Avatares IA: el avatar por defecto que sustituye al tÃpico placeholder gris.
- Email marketing: banners visuales sin necesidad de una foto.
- Branding: imagen Open Graph propia y distinta por categorÃa de contenido.
Optimización para web
- SVG: ideal para hero a pantalla completa. Escala sin perder calidad y suele pesar poco.
- PNG: comprime a AVIF o WebP. Apunta a un rango de 50-300 KB.
- CSS: la opción más ligera cuando funciona. Se puede animar sin peso extra.
- Para móvil, plantea una versión más simple del mesh: reduce la carga de la GPU en gama baja.
Aviso: si quieres que te avise cuando publique más recursos gratis como este, apúntate a mi newsletter.
Preguntas frecuentes
¿Qué es un mesh gradient?
Un degradado con varios puntos de color que se mezclan en transiciones orgánicas y multidireccionales. A diferencia del degradado lineal clásico, el mesh coloca los colores en posiciones concretas que se fusionan entre sÃ.
¿Hay propiedad CSS nativa para mesh gradients?
TodavÃa no. Se simulan apilando varios radial-gradient o usando una imagen SVG o PNG generada aparte. Hay una propuesta abierta en el grupo de trabajo de CSS del W3C, pero sin implementación en ningún navegador por ahora.
¿Mejor SVG, PNG o CSS?
SVG escala sin perder calidad y pesa poco. PNG da la máxima calidad fotográfica. CSS es 100% dinámico pero exige apilar varios degradados radiales a mano. Cada uno encaja en un caso distinto.
¿Qué generadores gratis recomiendas?
MagicPattern si quieres el mejor resultado visual. Mesher de CSS Hero o Colorffy si lo necesitas directamente en código CSS. Better Gradient si quieres tener los cuatro formatos de exportación a mano. Los ocho de esta lista los he comprobado en persona.
¿Cuánto pesa un mesh gradient en PNG?
A 1920×1080 sin optimizar, entre 1 y 3 MB. Optimizado con AVIF o WebP, baja a 80-300 KB. Para web, optimiza siempre antes de subirlo.
¿Dónde se usan mejor?
En hero sections, fondos de cards premium, avatares de IA y backgrounds de SaaS moderno. Encaja bien con glassmorphism y con branding de tono emocional.
¿Funcionan en dark mode?
SÃ, pero diseña dos versiones: una saturada para modo claro y otra más oscura o menos saturada para modo oscuro. Cámbialas con prefers-color-scheme.
¿Puedo usarlos en un proyecto comercial?
Los generados con las herramientas online de esta lista son de uso libre en general, pero revisa cada una si es para un cliente. En los packs descargables (Unblast, Vecteezy) y en Envato, comprueba siempre la licencia del recurso concreto antes de publicar.
Más recursos relacionados
- Crea degradados en CSS — la sintaxis completa si quieres ir más allá del mesh.
- Herramientas para crear fondos SVG — para cuando buscas algo más geométrico que orgánico.
- Fondos para páginas web gratis — el listado completo de fondos verificados del blog, más allá del mesh.
Tienes tres caminos
Si quieres uno rápido y ya: MagicPattern. Cinco minutos y te llevas el PNG o el SVG.
Si lo necesitas animado y ligero: CSS puro con degradados radiales apilados, más scroll-driven animations si quieres movimiento con el scroll.
Si trabajas en branding y necesitas calidad premium ya resuelta: un pack de Envato Elements con licencia comercial incluida.
¿Dónde vas a usar tu primer mesh gradient? Cuéntamelo en los comentarios. ¡Que los disfrutes!
