Générateur de mesh gradient

Générez un dégradé mesh multi-points coloré directement sur canvas, sans avoir besoin d'importer une image. Ajustez le nombre de points et leurs couleurs, puis exportez le résultat en PNG ou copiez l'équivalent CSS.

Cliquez sur une pastille pour changer sa couleur.

Comment ça marche

Chaque point coloré agit comme une source d'influence : pour chaque pixel du canvas, la couleur finale est une moyenne pondérée des couleurs de tous les points, la pondération étant d'autant plus forte que le point est proche (pondération par distance inverse). Cela produit un dégradé fluide et organique entre les différentes couleurs choisies.

Le CSS copié donnera-t-il exactement le même rendu que le PNG ?

Non, le CSS généré utilise une superposition de dégradés radiaux CSS natifs, qui donne un rendu proche mais pas pixel pour pixel identique à l'interpolation par distance inverse calculée sur le canvas. C'est une approximation légère mais fidèle, utilisable directement comme arrière-plan sur un site web.

Pourquoi le rendu change à chaque clic sur "Positions aléatoires" ?

Les positions des points sont tirées aléatoirement dans les limites du canvas à chaque génération. Combiné aux couleurs que vous choisissez, cela permet d'explorer rapidement de nombreuses variations de mesh gradient sans les positionner manuellement.

Tout le rendu est calculé localement dans votre navigateur : aucune donnée n'est envoyée à un serveur, y compris si vous ne fournissez aucune image.