Aide

Mesh gradient generator avec CSS et SVG

Choisissez de 2 à 8 couleurs : ce mesh gradient generator les fond en un arrière-plan doux et continu que vous modelez en déplaçant les points de couleur. Copier le CSS donne un dégradé en CSS qui fonctionne dans tous les navigateurs récents, et Télécharger le SVG un fichier de 1600 × 1200 qui s'adapte à toutes les tailles. Tout s'exécute dans votre navigateur, sans WebGL, sans envoi de fichier et sans compte.

Créer un mesh gradient, pas à pas

Regardez l'aperçu. Les petits points ronds qui s'y trouvent sont les points de couleur, un pour chaque tache de couleur du mesh.
Appuyez sur Aléatoire pour obtenir une nouvelle palette et une nouvelle disposition au hasard, autant de fois que vous le voulez, jusqu'à ce que le résultat s'en approche.
Ouvrez la ligne Couleurs et cliquez sur une pastille pour choisir votre propre couleur. Ajouter une couleur en ajoute (jusqu'à 8) et le petit x d'une pastille en retire une (jusqu'à 2 couleurs).
Déplacez le curseur Complexité, de 2 à 6, pour changer le nombre de points de couleur du mesh.
Faites glisser un point pour le déplacer, à la souris ou au doigt. Au clavier, sélectionnez un point et appuyez sur les flèches ; maintenez Maj pour des pas plus grands.
Appuyez sur Copier le CSS ou Télécharger le SVG quand l'aperçu vous convient. Une courte mention, Copié ou Enregistré, le confirme.

L'aperçu se met à jour à chaque modification, et la zone Code CSS affiche toujours le CSS exact de ce que vous voyez. Changer la complexité ou appuyer sur « Aléatoire » redispose les points : ceux que vous aviez déplacés prennent de nouvelles positions.

Ce que fait la complexité

La complexité crée une grille de complexité × complexité points de couleur, et chaque point reçoit une couleur de votre palette. Plus de points donnent un mesh plus varié, aux taches plus petites ; moins de points donnent de larges aplats simples.

Complexité 2 : 4 points, chaque tache couvre 65 % du canevas
Complexité 3 : 9 points, 43 %
Complexité 4 : 16 points, 33 %
Complexité 5 : 25 points, 26 %
Complexité 6 : 36 points, 22 %

Un point d'attention : les couleurs sont réparties entre les points, une palette peut donc compter plus de couleurs que le mesh n'a de points. Avec une complexité de 2, il n'y a que 4 points : une palette de 6 couleurs en montre au plus 4 à la fois. Augmentez la complexité pour faire apparaître les autres.

Dégradé mesh CSS à copier

La zone Code CSS contient deux déclarations : une background-color (la moyenne de votre palette, pour qu'aucun coin ne reste vide) et une background-image qui empile un radial-gradient() par point de couleur. C'est du CSS ordinaire, sans fichier image ni script.

Chaque couche passe d'une couleur pleine en son centre à une transparence totale sur son bord, et les couches se chevauchent, ce qui fait fondre les couleurs les unes dans les autres. La taille et la position sont en pourcentages : le dégradé s'étire donc pour épouser l'élément auquel vous l'appliquez. Pour un mesh gradient CSS prêt à coller, c'est tout ce qu'il faut.

Mesh gradient SVG : le téléchargement

Télécharger le SVG enregistre degrade-mesh.svg. Le fichier a une viewBox de 1600 × 1200, un rectangle de fond de la même couleur moyenne et un radialGradient par point de couleur. Étant vectoriel, il reste net en fond d'écran de téléphone, en arrière-plan de diapositive ou en visuel de réseau social. Dans un cadre qui n'est pas en 4:3, il remplit le cadre et rogne les bords au lieu de se déformer.

S'il vous faut un PNG, ouvrez le SVG dans un navigateur ou un éditeur qui lit le SVG et exportez-le à la taille voulue.

Un générateur de fond dégradé pour vos projets

Site web ou bandeau d'accueil : collez le CSS dans la règle de cet élément. Un texte posé sur un mélange de couleurs chargé peut être difficile à lire ; testez-le avec le Vérificateur de contraste.
Diapositives, fonds d'écran et publications : téléchargez le SVG, puis placez-le ou exportez-le depuis votre application de design.
Respecter une charte : cliquez sur une pastille et choisissez votre propre couleur. La Pipette de couleur d'image peut d'abord extraire une couleur d'une photo ou d'un logo.

Les deux sorties sont un instantané de l'aperçu actuel. Si vous relancez l'aléatoire, copiez ou téléchargez de nouveau pour obtenir la nouvelle version.

Questions fréquentes

Existe-t-il un mesh gradient CSS gratuit à copier ?

Oui, celui-ci. La zone « Code CSS » affiche une background-color et une background-image composée de couches radial-gradient() empilées, une par point de couleur. C'est du CSS standard, sans JavaScript ni fichier image, qui fonctionne dans tous les navigateurs récents. Appuyez sur « Copier le CSS » et collez-le dans une feuille de style ou un attribut style.

Peut-on télécharger un mesh gradient SVG ?

Oui. « Télécharger le SVG » enregistre un fichier avec une viewBox de 1600 × 1200. Il est construit à partir de couches radialGradient et reste donc net à toutes les tailles. Dans un cadre qui n'est pas en 4:3, il remplit le cadre et rogne les bords au lieu de se déformer.

Comment utiliser un dégradé comme fond de site web ?

Copiez le CSS et collez les deux déclarations dans la règle de l'élément à habiller, par exemple un bandeau d'accueil ou le body. Les taches sont positionnées en pourcentages et s'étirent avec l'élément. Vérifiez que votre texte reste lisible sur les couleurs choisies.

Peut-on obtenir le dégradé en PNG ?

Pas directement : cet outil exporte du CSS et du SVG, pas du PNG. Ouvrez le SVG téléchargé dans un navigateur ou un éditeur qui lit le SVG, puis exportez-le ou faites une capture à la taille en pixels dont vous avez besoin.

Peut-on animer le mesh gradient ?

Non. L'outil produit un seul dégradé fixe : vous pouvez déplacer les points et changer les couleurs, mais le CSS et le SVG exportés ne bougent pas.

Est-ce la même chose que le filet de dégradé d'Illustrator ?

Non. Le filet de dégradé d'Illustrator est une grille de zones vectorielles modifiables. Ce générateur mélange des dégradés radiaux doux qui se chevauchent, un par point de couleur : le rendu est également lisse et multicolore, mais l'export se fait en CSS ou en SVG simples.

Où trouver un générateur de dégradé CSS ?

Ce mesh gradient generator en est un : il produit le code CSS d'un fond multicolore à partir de 2 à 8 couleurs que vous choisissez. Pour un dégradé classique à deux couleurs, d'autres outils conviennent aussi, mais ici le résultat est un mesh doux, sans image à héberger.

Recommandés

Barres lumineuses connectées Govee
Projetez la même lueur douce sur le mur derrière votre écran.
Imprimante Fujifilm Instax Mini Link 3
Imprimez votre mesh préféré en petite carte ou en souvenir de fond d'écran.
Sonde de calibrage Calibrite Display 123
Vérifiez que votre dégradé rend pareil sur chaque écran.

Aide à garder les outils gratuits. ✨

Images non contractuelles. En tant que Partenaire Amazon, je réalise un bénéfice sur les achats remplissant les conditions requises.