Générateur de dégradé mesh

Créez un fond multicolore fixe ou animé à partir de quatre zones radiales et d’une couleur de base. Réglez les couleurs, la position et la portée de chaque zone, puis exportez du CSS, des classes Tailwind, un SVG ou un PNG. Tout est généré dans votre navigateur.

100 % local

AnimerAnimez le dégradé avec un mouvement doux. La préférence de mouvement réduit est respectée.

Préréglages

Choisissez un préréglage pour régler tous les contrôles d’un coup, puis ajustez.

Couleur de fond

Rayon0px

Couleurs

Tache 1

Position 1 horizontale18%Position 1 verticale22%Douceur58%

Tache 2

Position 2 horizontale74%Position 2 verticale30%Douceur52%

Tache 3

Position 3 horizontale42%Position 3 verticale78%Douceur60%

Tache 4

Position 4 horizontale88%Position 4 verticale82%Douceur45%

Astuce : glissez les poignées numérotées sur l’aperçu pour déplacer chaque tache. Les flèches ajustent, Maj accélère.

Un préréglage règle tous les curseurs en un clic ; Aléatoire fait de même avec des valeurs aléatoires.

CSS

.mesh {
  background-color: #070b1a;
  background-image:
    radial-gradient(ellipse 45% 45% at 88% 82%, #0ea5e9 0%, rgb(14 165 233 / 0.55) 70%, rgb(14 165 233 / 0) 100%),
    radial-gradient(ellipse 60% 60% at 42% 78%, #a855f7 0%, rgb(168 85 247 / 0.55) 70%, rgb(168 85 247 / 0) 100%),
    radial-gradient(ellipse 52% 52% at 74% 30%, #22d3a5 0%, rgb(34 211 165 / 0.55) 70%, rgb(34 211 165 / 0) 100%),
    radial-gradient(ellipse 58% 58% at 18% 22%, #5b8cff 0%, rgb(91 140 255 / 0.55) 70%, rgb(91 140 255 / 0) 100%);
  border-radius: 0px;
}

Le CSS empile des dégradés radiaux : un par tache, chacun s’estompant vers le transparent, sur la couleur de fond. C’est pourquoi aucune couture n’apparaît : les taches ne se mélangent pas, elles se superposent.

Classes Tailwind

bg-[#070b1a] rounded-[0px] bg-[image:radial-gradient(ellipse_45%_45%_at_88%_82%,_#0ea5e9_0%,_rgb(14_165_233_/_0.55)_70%,_rgb(14_165_233_/_0)_100%),_radial-gradient(ellipse_60%_60%_at_42%_78%,_#a855f7_0%,_rgb(168_85_247_/_0.55)_70%,_rgb(168_85_247_/_0)_100%),_radial-gradient(ellipse_52%_52%_at_74%_30%,_#22d3a5_0%,_rgb(34_211_165_/_0.55)_70%,_rgb(34_211_165_/_0)_100%),_radial-gradient(ellipse_58%_58%_at_18%_22%,_#5b8cff_0%,_rgb(91_140_255_/_0.55)_70%,_rgb(91_140_255_/_0)_100%)]

Valeurs arbitraires : chaque nombre est exact, aucun n’est arrondi à l’échelon d’échelle le plus proche.

Comment fonctionne Générateur de dégradé mesh ?

Chaque zone est un dégradé radial elliptique posé sur une couleur de base. Sa portée fixe le rayon horizontal en pourcentage de la largeur et le rayon vertical en pourcentage de la hauteur. La quatrième zone apparaît devant les autres, dans l’aperçu SVG comme dans le CSS exporté.

Les couleurs s’estompent vers leur propre teinte avec un alpha nul. Les zones superposées se mélangent avec les couches inférieures et leur aspect dépend aussi de la couleur de base. Le CSS standard interpole correctement vers `transparent` : cette valeur ne produit pas nécessairement de teintes ternes.

L’option d’animation déplace les zones sur un cycle de 6 à 30 secondes. Le CSS enregistre des propriétés numériques avec `@property` ; le SVG utilise des transformations. Les deux respectent `prefers-reduced-motion`. Le PNG reste une image fixe de la position initiale.

Les grands fonds et les animations peuvent augmenter le travail de rendu. Vérifiez les performances sur les appareils visés et le contraste dans toutes les zones situées derrière votre texte. Une surface unie facilite la lecture sur des couleurs changeantes.

Paramètres du dégradé

Couleur de fond #070b1a
Tache 1 #5b8cff · 18%, 22% · 58%
Tache 2 #22d3a5 · 74%, 30% · 52%
Tache 3 #a855f7 · 42%, 78% · 60%
Tache 4 #0ea5e9 · 88%, 82% · 45%

CSS généré

.mesh {
  background-color: #070b1a;
  background-image:
    radial-gradient(ellipse 45% 45% at 88% 82%,
      #0ea5e9 0%, rgb(14 165 233 / 0.55) 70%, rgb(14 165 233 / 0) 100%),
    radial-gradient(ellipse 60% 60% at 42% 78%,
      #a855f7 0%, rgb(168 85 247 / 0.55) 70%, rgb(168 85 247 / 0) 100%),
    radial-gradient(ellipse 52% 52% at 74% 30%,
      #22d3a5 0%, rgb(34 211 165 / 0.55) 70%, rgb(34 211 165 / 0) 100%),
    radial-gradient(ellipse 58% 58% at 18% 22%,
      #5b8cff 0%, rgb(91 140 255 / 0.55) 70%, rgb(91 140 255 / 0) 100%);
}

Quelles options et quels cas limites Générateur de dégradé mesh prend en charge ?

Référence technique et options
Paramètre	Type	Valeur par défaut	Comportement et cas limites
Position de la zone	0–100%	—	Place le centre de chaque zone en pourcentage de la largeur et de la hauteur de l’élément.
Portée	pourcentage	58%	Fixe les rayons de l’ellipse par rapport à la largeur et à la hauteur ; la couleur devient transparente à son bord.
Couleur de base	hex	#070b1a	Apparaît dans les zones transparentes et contribue à la couleur des couches qui se superposent.
Fin du dégradé	rgb() avec alpha 0	automatique	Utilise la couleur de la zone avec une opacité nulle pour le dernier point du dégradé.
Ordre des couches	de l’arrière vers l’avant	couche 4 au premier plan	La quatrième zone est au premier plan. Le CSS énumère les dégradés dans l’ordre nécessaire pour correspondre au SVG.
border-radius	px	0	Arrondit les coins de l’aperçu et des fichiers exportés.

Questions fréquentes

Comment créer un dégradé mesh en CSS ?

Superposez plusieurs `radial-gradient()` sur un `background-color`. Le générateur prépare les quatre dégradés avec leurs centres, leurs rayons elliptiques et leurs points de couleur. Copiez le CSS complet ou les classes Tailwind sur votre élément.

Pourquoi des teintes ternes apparaissent-elles entre les couleurs ?

La couleur de base et le mélange de couches translucides peuvent produire des teintes ternes. Changez le fond, éloignez les zones ou réduisez leur portée. Le CSS standard interpole vers `transparent` avec un alpha prémultiplié : cette valeur ne provoque pas à elle seule un halo sombre.

Puis-je animer le dégradé ?

Oui. Activez l’animation et choisissez un cycle de 6 à 30 secondes. Le CSS utilise des propriétés enregistrées avec `@property` et des images clés ; le SVG déplace ses zones. Pour Tailwind, ajoutez aussi les règles d’animation du CSS généré. La préférence de mouvement réduit désactive l’animation.

Quel est l’effet sur les performances ?

Il dépend de la taille, de l’animation et de l’appareil. Testez les grands fonds sur mobile et utilisez le PNG fixe si vous souhaitez réduire le travail de rendu. Un fond fixe n’a pas à recalculer une animation à chaque image.

Puis-je placer du texte sur le dégradé ?

Oui, mais vérifiez le contraste dans les zones les plus claires et les plus sombres, y compris pendant l’animation. Un panneau uni ou un fond uniforme derrière le texte offre un résultat plus prévisible.

Quelle est la différence avec un dégradé linéaire ?

Un dégradé linéaire évolue le long d’un axe. Ce fond combine quatre centres radiaux en deux dimensions, ce qui permet de placer chaque zone de couleur indépendamment.

Équipe ToolsByUs · Comment nous vérifions nos outils