Dégradés maillés : ce que c’est et comment en créer un

Un dégradé maillé est un dégradé construit à partir de plusieurs points de couleur répartis sur une surface, chacun se fondant dans ses voisins dans toutes les directions à la fois. Un dégradé linéaire suit une ligne et un dégradé radial part d’un centre ; un maillé n’a pas de trajet unique, si bien que la couleur s’accumule, dérive et se superpose comme la lumière à travers l’eau. C’est pourquoi les dégradés maillés paraissent organiques, et pourquoi ils sont devenus le style par défaut des bannières d’accueil, des fonds d’écran et des pochettes d’album.

Ce guide explique comment fonctionne un maillé, comment en créer un en CSS et dans les outils de design, et comment éviter les taches grises et les bandes qui donnent à tant d’entre eux un air bon marché. Pour les autres formes, voyez les types de dégradés.

Ce qui fait d’un dégradé un maillé

Dans un vrai dégradé de forme (filet de dégradé), comme celui d’Adobe Illustrator, la surface est divisée en grille. Chaque point de la grille porte une couleur, et le logiciel fond en douceur entre points voisins, en courbant la grille pour guider la couleur. Les dégradés libres suppriment la grille et vous laissent placer des points de couleur n’importe où. Les dégradés maillés du web et des réseaux sociaux prennent généralement une troisième voie : des taches de couleur douces posées sur une base et fondues ensemble.

Les trois partagent une même idée. La couleur de chaque pixel est un mélange des points de couleur proches, pondéré par leur distance. Déplacez un point et seul son voisinage change, ce qui donne à un maillé l’air d’avoir été fait à la main plutôt que calculé.

Pourquoi les dégradés maillés paraissent organiques

Cette liberté est aussi le danger. Sans structure, un maillé peut ressembler à un flou aléatoire. Les bons ont une composition : une zone claire où l’œil se pose d’abord, une zone plus sombre qui donne du poids, et une zone calme où les mots peuvent s’installer.

Comment créer un dégradé maillé en CSS

1. 1

   Choisissez une couleur de base

   Prenez un fond sombre ou clair. Il apparaît partout où les taches de couleur s’estompent : il décide donc de l’ambiance générale.

2. 2

   Placez trois à cinq taches de couleur

   Chaque tache est un radial-gradient centré à une position avec at x% y%, qui s’estompe vers transparent. Placez-les près des coins et des bords plutôt qu’au milieu.

3. 3

   Laissez-les se superposer

   Estompez chaque tache entre 45 % et 60 % de sa portée pour que les voisines se rejoignent. C’est dans les superpositions que le maillé gagne sa richesse.

4. 4

   Gardez une zone calme

   Laissez une zone surtout en couleur de base, en général là où ira votre titre. Voyez du texte sur un dégradé.

5. 5

   Ajoutez du grain

   Une fine couche de bruit masque les bandes et ajoute de la profondeur. Dégradés granuleux montre le code.

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(at 12% 18%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 88% 12%, #0ea5e9 0px, transparent 50%),
    radial-gradient(at 80% 88%, #14b8a6 0px, transparent 55%),
    radial-gradient(at 20% 92%, #f472b6 0px, transparent 45%);
}

Comme les taches sont en pourcentages, le maillé s’adapte à la taille de sa boîte. Sur des formats très différents, comme une story en hauteur et une bannière en largeur, ajustez les positions at pour que la zone claire tombe toujours où vous le voulez. La même palette peut être animée lentement en déplaçant ces positions ; arrière-plans en dégradé animé explique comment le faire sans nuire aux performances.

Créer un dégradé maillé dans un outil de design

Dans les outils dotés d’un vrai maillé ou d’un dégradé libre, placez directement vos points de couleur et déplacez-les jusqu’à ce que la composition fonctionne. Dans les outils qui n’en ont pas, la méthode du flou marche partout : dessinez trois à cinq formes douces dans vos couleurs sur un rectangle de base, floutez-les fortement, souvent d’un quart de la largeur du canevas ou plus, et laissez-les se superposer. Ajoutez ensuite un calque de grain par-dessus et exportez à la taille finale plutôt que d’agrandir.

Erreurs de dégradé maillé et comment les corriger

Un maillé vaut ce que vaut sa palette. Si vous hésitez sur les couleurs qui se fondront proprement, partez d’une famille de couleurs analogues et ajoutez un accent contrasté sur une seule tache.

GR·FVZ6·KW

Thin Dune

Voir ce Mark

Si vous préférez décrire un maillé plutôt que le construire, la Forge crée de nouveaux Marks à partir d’une phrase ou réglage par réglage, avec jusqu’à huit couleurs et trois matières superposées.