Qu'est-ce que Générateur de dégradés en maille ?

Générez des dégradés mesh multicolores pour les arrière-plans de sites web, les visuels de réseaux sociaux et les designs d'interface. Choisissez vos couleurs, positionnez les points de contrôle et obtenez des dégradés organiques qui vont au-delà des simples motifs linéaires ou radiaux.

Le canevas superpose plusieurs dégradés radiaux, un par point de contrôle. Déplacez un point pour remodeler le mélange, changez sa couleur avec l'échantillon, et le code se met à jour en direct. Jusqu'à six points gardent un résultat équilibré. Exportez en PNG ou SVG à des tailles de bannière comme 1920x1080, collez le SVG directement dans Figma, ou récupérez le code en CSS, SCSS ou Tailwind.

Comment utiliser

1. Choisissez vos couleurs de base en cliquant sur les échantillons de couleur ou en saisissant des valeurs hexadécimales. Ajoutez jusqu'à 6 points de contrôle de couleur.
2. Faites glisser les points de contrôle sur le canevas pour modifier le flux du dégradé.
3. Copiez le code en CSS, SCSS ou Tailwind, ou téléchargez le dégradé en PNG ou SVG.

Quand l'utiliser

• Concevoir un arrière-plan hero qui ne ressemble pas à un modèle générique.
• Habiller des cartes produit ou des pochettes de playlist sans photo.
• Générer des fonds pour des écrans de chargement ou des états vides d'application.

Résultat

Un designer UI crée un dégradé mesh du violet au turquoise avec 4 points de contrôle pour la section hero d'une page d'accueil, puis copie le CSS pour le coller directement dans sa feuille de styles.

FAQ

Quelle est la différence entre un mesh gradient et un dégradé linéaire ?

Un dégradé linéaire mélange deux couleurs le long d'un axe. Un mesh gradient empile plusieurs taches de couleur douces, le résultat ressemble plus à un lavis d'aquarelle qu'à une transition nette. La frontière entre les couleurs devient plus difficile à repérer.

Pourquoi le CSS utilise-t-il radial-gradient et non conic-gradient ?

Les radial-gradient empilés bénéficient du plus large support navigateur et se dégradent proprement. Le générateur émet un radial-gradient par point de contrôle, empilé via background-image, donc tous les navigateurs modernes affichent le rendu sans polyfill.

Mon mesh gradient s'affichera-t-il pareil dans Safari et Chrome ?

Oui. La sortie utilise le radial-gradient standard de CSS sans préfixe constructeur. Safari, Chrome, Firefox et Edge produisent un rendu identique. Les très vieux navigateurs retombent sur la première couleur.

Combien de points de contrôle puis-je utiliser ?

Six au maximum. Au-delà, le mélange devient souvent terne au lieu d'être plus riche. Deux ou trois points donnent des dégradés graphiques nets, quatre à six produisent des lavis plus picturaux.

Puis-je exporter le dégradé en SVG ?

Oui. L'export SVG construit le dégradé à partir de couches radial-gradient empilées, donc il s'affiche partout où fonctionnent les dégradés CSS et se colle directement dans Figma comme remplissage d'une forme. Le vrai dégradé de maillage SVG de la spécification n'est toujours pris en charge nulle part, c'est pourquoi cette approche empilée est la version qui fonctionne vraiment partout où vous la collez.

Outils similaires