Generador de degradados de malla
Crea degradados de malla fluidos con WebGL — exporta como CSS o como imagen
Degradado de malla
5 puntosColores
Deformación / distorsión
Filtros
Cómo funciona el generador de degradados de malla
Crea degradados de malla fluidos con WebGL. Coloca puntos de color, mézclalos suavemente y exporta como CSS o como imagen de alta resolución.
Renderizado con WebGL
Los degradados de malla se renderizan con WebGL para mezclar varios puntos de color de forma suave y con alto rendimiento. El resultado es fluido y orgánico, algo imposible de lograr con los degradados CSS estándar.
Arrastra los puntos de color
Coloca los puntos de color en cualquier parte del lienzo arrastrándolos. Cada punto irradia su color hacia fuera y se mezcla suavemente con los vecinos, creando transiciones naturales.
Exportar como imagen
Descarga el degradado de malla como imagen PNG de alta resolución. Úsalo como fondo de una sección hero, como gráfico para redes sociales o como recurso de diseño en cualquier herramienta.
Fondo CSS
Exporta el degradado como fondo CSS que imita el efecto de malla con degradados radiales superpuestos. Pégalo en tu hoja de estilos para tener una versión ligera solo con CSS.
Preguntas frecuentes
Un degradado de malla mezcla varios colores a partir de puntos repartidos por una superficie y crea transiciones suaves y orgánicas. A diferencia de los degradados lineales o radiales, que siguen una sola dirección, los degradados de malla fluyen con naturalidad entre cualquier número de puntos de color.
Todavía no existen degradados de malla nativos en CSS. Esta herramienta genera una aproximación con degradados radiales superpuestos que imita muy bien el aspecto. Para un resultado exacto al píxel, exporta una imagen PNG y úsala como fondo.
Puedes añadir tantos puntos de color como necesites. Cada punto se mezcla con sus vecinos. Con menos puntos obtienes degradados amplios y sencillos; con más, campos de color complejos y detallados.
El lienzo usa WebGL para una interpolación de malla real, mientras que el CSS exportado la aproxima con degradados radiales superpuestos. El resultado es parecido, pero no idéntico: si necesitas precisión, exporta mejor a PNG.