Générateur de mesh gradient : déplacez des points, copiez le CSS | We.Inc
Déplacez des points de couleur sur un canevas pour créer un mesh gradient doux, puis copiez du CSS pur composé de dégradés radiaux superposés ou téléchargez un PNG. Gratuit, dans votre navigateur.
Générateur de mesh gradient
Un mesh gradient mélange plusieurs points de couleur sur une surface au lieu de suivre une seule ligne. Sur le web, vous pouvez l'imiter en CSS pur en superposant un radial-gradient par point sur une couleur de base. Déplacez les points ci-dessous, réglez la couleur et la portée de chacun, puis copiez le CSS ou enregistrez un PNG.
Quel outil de dégradé choisir
Vous voulez
Utilisez
Résultat
Un fond fixe de taches douces, sans script
Ce générateur de mesh
CSS ou PNG
Un fond qui bouge lentement
Générateur de dégradé shader
Composant WebGL
Un mélange linéaire, radial ou conique de deux à cinq arrêts
Générateur de dégradé CSS
Une seule ligne de dégradé
Chaque point devient ici son propre dégradé radial, peint par-dessus une couleur de base. Comme le résultat est du CSS ordinaire, il ne coûte aucun téléchargement, ne nécessite aucun JavaScript sur votre site et s'adapte à n'importe quelle taille de boîte sans flou.
Choisissez un préréglage ou gardez celui par défaut, puis faites glisser n'importe quelle poignée numérotée sur le canevas pour déplacer cette couleur.
Au clavier, mettez le focus sur une poignée et déplacez-la avec les flèches, ou saisissez des valeurs X et Y exactes dans la liste des points.
Modifiez la couleur d'un point et sa portée. La portée est l'endroit où la couleur devient entièrement transparente, mesurée en proportion de la distance entre le point et le coin le plus éloigné de la boîte.
Ajoutez jusqu'à huit points ou supprimez ceux en trop, puis copiez le CSS ou téléchargez le canevas en PNG à la taille de votre choix.
Trois à cinq points donnent généralement un rendu plus riche que huit. Davantage de couches transforme surtout le centre en bouillie.
Choisissez une couleur de base proche du point le plus clair pour un effet pastel, ou très sombre pour un style lumineux de nuit.
Placez le texte des titres sur la zone la plus calme, et vérifiez son contraste aux endroits les plus clairs et les plus sombres qu'il recouvre.
Le PNG est pratique pour les e-mails et les images de réseaux sociaux, où un fond CSS ne suit pas le design.
Questions fréquentes
Est-ce un vrai mesh gradient ?
Les applications de design comme les éditeurs vectoriels construisent de vrais maillages à partir d'une grille de zones. Le CSS n'a pas de fonction mesh, cet outil superpose donc des dégradés radiaux, ce qui donne le même rendu doux et multicolore pour les fonds et les sections hero.
En quoi est-il différent du générateur de dégradé shader ?
L'outil shader dessine un dégradé animé en WebGL et exporte un composant qui exécute un script. Celui-ci produit une image fixe uniquement en CSS : elle s'affiche instantanément, s'imprime et fonctionne là où les scripts sont bloqués.
Pourquoi chaque couleur s'estompe-t-elle vers une version transparente d'elle-même ?
Un fondu vers le mot-clé transparent peut teinter le bord en gris dans certains modes d'interpolation. Terminer chaque couche avec les mêmes valeurs de rouge, vert et bleu et un alpha à zéro garde la bordure nette.
Puis-je utiliser ce CSS dans Tailwind ?
Oui. Placez les déclarations dans une classe de votre feuille de style, ou collez la valeur de background-image dans une propriété arbitraire comme [background-image:...] si vous préférez la garder en ligne.
Le PNG correspond-il exactement au CSS ?
De très près. Le téléchargement est dessiné sur un canevas avec les mêmes points, couleurs et portées, mais les navigateurs peuvent lisser les dégradés de canevas un peu différemment des dégradés CSS.
Comment des dégradés radiaux superposés forment un mesh
background-image accepte une liste séparée par des virgules, et la première couche listée est peinte au-dessus. Chaque couche est ici un cercle centré sur un point, opaque au centre et transparent à sa portée, si bien que les couleurs voisines se chevauchent et se mélangent.
Aucun mot-clé de taille n'est indiqué, chaque cercle utilise donc la taille par défaut farthest-corner, et les pourcentages des arrêts suivent la taille de la boîte. Un point proche du centre s'étend donc moins qu'un point dans un coin avec la même portée, et une bannière large agrandit chaque cercle : prévisualisez au format que vous utiliserez réellement.
Obtenir un beau résultat
Choisissez des couleurs proches sur le cercle chromatique pour un rendu apaisé, et ajoutez un seul point contrasté pour de l'énergie. Placez des points en partie hors du bord pour suggérer que la couleur continue au-delà du cadre.
Si vous voyez des bandes visibles sur de grands dégradés sombres, ajoutez une légère texture de bruit en couche supplémentaire, ou éclaircissez un peu la base.
Le CSS derrière un mesh
Voici le préréglage Port écrit à la main. Modifiez n'importe quelle valeur et le résultat se met à jour dans le cadre.
Quatre points sur une base pâle
Chaque radial-gradient correspond à un point de couleur. Les couches listées en premier se placent au-dessus des suivantes.
Ce que contrôle chaque réglage
Les réglages et le CSS qu'ils produisent
Réglage
Partie CSS
Effet
Position du point
circle at X% Y%
Là où la couleur est la plus intense
Couleur du point
premier arrêt de couleur
La teinte peinte à cet endroit
Portée
second arrêt, par ex. 55%
Proportion de la distance au coin le plus éloigné où la couleur devient entièrement transparente
Couleur de base
Ce qui apparaît là où aucun point n'arrive
Ordre des points
ordre des couches
Les premiers points recouvrent les suivants là où ils se chevauchent
Port
Abricot
Équipe de nuit
Prairie
Éditeur de mesh gradient
Faites glisser les points de couleur numérotés sur le canevas, réglez la couleur et la portée de chacun, puis copiez le CSS ou téléchargez un PNG. Préréglages : Port, Abricot, Équipe de nuit, Prairie.
Préréglages
Point {n} à {x}% {y}%. Utilisez les flèches pour le déplacer.