Dégradé d'une photo
Composez un dégradé mesh doux à partir de plusieurs couleurs ou prenez la palette de votre propre photo. Déplacez les points de couleur directement sur la toile, ajoutez déformation et grain, téléchargez l'image ou copiez le CSS.
Votre navigateur ne prend pas en charge WebGL, l'outil ne peut pas démarrer. Essayez un autre navigateur ou activez l'accélération matérielle.
Survolez la toile pour voir les points de couleur : faites-les glisser, un double-clic ajoute une couleur. Déposez une photo sur la toile ou collez-la depuis le presse-papiers.Faites glisser les points de couleur du doigt ; touchez deux fois pour ajouter une couleur.
Les couleurs suivent l'ordre de la liste. Pour l'inverser, utilisez le bouton "Ordre inverse".
CSS
Exact pour linéaire, radial et conique. Pour mesh et mosaïque, un fond proche fait de taches radiales, sans déformation ni grain.
Votre dégradé en une minute
- 1Choisissez les couleursdans la palette, au hasard ou depuis votre photo
- 2Déplacez les pointset réglez la déformation et le grain
- 3TéléchargezPNG, JPG, WebP, SVG ou copiez le CSS
Ce que sont ces dégradés
Un dégradé mesh se compose de plusieurs points de couleur : chacun colore la zone autour de lui, et entre eux les couleurs se fondent en douceur. Ces fonds habillent couvertures, bannières, stories et écrans d'applications. Le curseur "Douceur" règle l'étendue du mélange, et "Mosaïque" découpe la toile en zones selon le point le plus proche. Linéaire, radial et conique sont des dégradés classiques qui passent exactement en CSS.
Palette d'une photo
Chargez une photo : l'outil y trouve jusqu'à sept couleurs principales et place les points là où ces couleurs se trouvent sur l'image. Le dégradé reprend ainsi l'ambiance de la photo : coucher de soleil, mer, intérieur, emballage d'un produit. La photo reste dans votre navigateur et n'est envoyée nulle part.
Déformation et grain
La déformation décale les couleurs selon un motif : vagues, bruit doux, cellules ou tourbillon autour du centre. "Force" règle l'intensité, "Échelle du motif" sa grosseur, et le bouton dé donne un autre motif aléatoire. Le grain ajoute une légère texture argentique : le dégradé ne paraît pas plastique et ne fait pas de bandes. Dans "Ajuster toutes les couleurs", vous modifiez d'un coup la teinte, la saturation et la luminosité de toute la palette.
Essayez aussi
Gratuits aussi, sans inscription
Questions fréquentes
Pas de réponse ? Écrivez-nous, on vous aide.
Celle indiquée dans les champs W et H, jusqu'à 4096 pixels sur le grand côté (limite de la carte graphique dans le navigateur). Des tailles prêtes existent pour un post, une story, une bannière X, un aperçu de lien et un fond d'écran. L'écran affiche une copie réduite aux mêmes proportions.
Le PNG est sans perte, idéal pour le design. Le JPG et le WebP sont plus légers, pratiques pour les réseaux sociaux et les sites. Le SVG d'un dégradé linéaire ou radial sans déformation ni grain est un vrai fichier vectoriel modifiable dans Figma ; pour les dégradés mesh et les déformations, le SVG contient une image, car il n'existe pas de format vectoriel pour ces dégradés.
Pour linéaire, radial et conique, oui. Le dégradé mesh en CSS est composé de plusieurs taches radiales et ressemble à l'image, mais sans déformation ni grain : les navigateurs ne savent pas les dessiner en CSS simple. S'il vous faut exactement ce fond, utilisez le PNG.
La photo est réduite et tous ses pixels sont regroupés par proximité de couleur (méthode des k-moyennes). Les centres des groupes deviennent les couleurs de la palette, et le point de chaque couleur est placé là où cette couleur apparaît le plus sur l'image. Les couleurs trop rares sont écartées.
Oui. Cliquez sur le carré de couleur pour ouvrir le sélecteur ou saisissez un code HEX dans le champ voisin. Vous pouvez avoir de 2 à 12 couleurs. La croix supprime une couleur, le plus en ajoute une, et un double-clic sur la toile place un nouveau point à cet endroit.
Cliquez sur "Lien du dégradé" : le lien est copié et ouvre le même dégradé avec toutes les couleurs, les points et les réglages. Le dernier dégradé est aussi enregistré dans votre navigateur et s'ouvre à la prochaine visite. Une erreur ? Annulez l'étape avec le bouton flèche ou Ctrl+Z.
L'écran affiche une copie réduite tandis que le fichier est rendu en taille réelle : le grain et les fins détails de la déformation y sont donc plus petits. Les couleurs et la position des points sont identiques.
Oui, sans restriction : c'est votre image. La photo d'où vient la palette ne quitte pas votre navigateur, et une palette de couleurs n'est pas protégée par le droit d'auteur.