Generador de mesh gradient
Genere un degradado mesh multipunto de colores directamente en un canvas, sin necesidad de importar una imagen. Ajuste el número de puntos y sus colores y después exporte el resultado en PNG o copie el CSS equivalente.
Cómo funciona
Cada punto de color actúa como una fuente de influencia: para cada píxel del canvas, el color final es una media ponderada de los colores de todos los puntos, con una ponderación tanto mayor cuanto más cerca está el punto (ponderación por distancia inversa). Así se obtiene un degradado fluido y orgánico entre los distintos colores elegidos.
¿El CSS copiado dará exactamente el mismo resultado que el PNG?
No, el CSS generado utiliza una superposición de degradados radiales CSS nativos, que da un resultado cercano pero no idéntico píxel por píxel a la interpolación por distancia inversa calculada en el canvas. Es una aproximación ligera pero fiel, utilizable directamente como fondo en un sitio web.
¿Por qué cambia el resultado cada vez que hago clic en «Posiciones aleatorias»?
Las posiciones de los puntos se sortean al azar dentro de los límites del canvas en cada generación. Combinado con los colores que elija, esto permite explorar rápidamente muchas variaciones de mesh gradient sin tener que colocarlos manualmente.
Todo el renderizado se calcula localmente en su navegador: no se envía ningún dato a un servidor, ni siquiera si no proporciona ninguna imagen.