Linéaire, radial, conique, maillé : les types de dégradés expliqués

Il existe quatre grands types de dégradés : linéaire, radial, conique et maillé. Un dégradé linéaire change de couleur le long d’une ligne droite, un dégradé radial se diffuse vers l’extérieur depuis un point, un dégradé conique tourne autour d’un centre comme une aiguille d’horloge, et un dégradé maillé fond plusieurs points de couleur à la fois, en deux dimensions. Autour d’eux gravitent quelques variantes utiles : les dégradés répétés, les dégradés libres et le grain, qui est une texture posée par-dessus plutôt qu’un type à part entière.

Ci-dessous, chaque type a un exemple en direct à copier, une note sur ce qu’il fait bien et un lien vers son guide complet. Si vous partez de zéro, qu’est-ce qu’un dégradé explique d’abord les arrêts, les positions et les espaces colorimétriques.

Les dégradés linéaires

Un dégradé linéaire suit une ligne droite selon l’angle de votre choix. En CSS, la direction par défaut va de haut en bas, 0deg pointe vers le haut et les angles tournent dans le sens des aiguilles d’une montre : 90deg va de gauche à droite et 135deg du coin supérieur gauche vers le coin inférieur droit. C’est de loin le type le plus courant, car il est prévisible, remplit proprement n’importe quel rectangle et évoque une lumière venant d’un côté.

Utilisez les dégradés linéaires pour les arrière-plans de pages et de publications, les boutons, les bannières et tout ce qui doit se répéter ou s’agrandir de façon prévisible. La syntaxe et ses détails sont dans les dégradés linéaires en CSS, et le choix de la direction dans l’angle d’un dégradé.

Les dégradés radiaux

Un dégradé radial part d’un point et se diffuse vers l’extérieur en cercle ou en ellipse. Décentrer ce point est l’astuce qui lui donne l’air d’une lumière : une lueur en haut à gauche se lit comme une lampe, un soleil ou un reflet sur une surface courbe. Les dégradés radiaux servent aussi à construire la plupart des vignettages doux et des effets de projecteur.

Utilisez les dégradés radiaux pour les lueurs, les projecteurs, les vignettages, les sphères et tout ce qui doit sembler éclairé depuis un point. Voir les dégradés radiaux pour les mots-clés de taille comme closest-side et farthest-corner.

Les dégradés coniques

Un dégradé conique change de couleur quand on tourne autour d’un point central, plutôt qu’en s’en éloignant. Imaginez le balayage d’une aiguille d’horloge. C’est donc le choix naturel pour les cercles chromatiques, les graphiques circulaires, les anneaux de chargement et les reflets angulaires comme le métal brossé ou l’éclat arc-en-ciel d’une feuille holographique.

Utilisez les dégradés coniques pour les cercles, les graphiques, les reflets et l’irisation. Le guide complet est les dégradés coniques, et l’effet feuille métallisée se trouve dans les dégradés holographiques.

Les dégradés répétés

Chacun des trois types CSS a une version répétée. Au lieu d’étirer un fondu sur toute la forme, elle répète un court fondu encore et encore. Avec des arrêts nets, vous obtenez des rayures, des anneaux et des rayons de soleil parfaitement nets, sans aucun fichier image.

Les dégradés maillés et libres

Un dégradé maillé place de la couleur en plusieurs points d’une surface et les fond tous en deux dimensions. Illustrator appelle sa version à points et à grille un filet de dégradé et sa version plus souple un dégradé de forme libre. Dans les deux cas, le résultat n’a pas de direction unique, d’où son aspect organique, comme de la lumière à travers l’eau ou de la peinture qui a coulé. Le CSS n’a pas de type maillé, mais on peut l’imiter de façon convaincante en empilant des dégradés radiaux doux sur une couleur de base.

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(at 18% 22%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 82% 18%, #0ea5e9 0px, transparent 50%),
    radial-gradient(at 70% 85%, #f472b6 0px, transparent 55%),
    radial-gradient(at 25% 80%, #14b8a6 0px, transparent 50%);
}

Utilisez les dégradés maillés pour les arrière-plans d’en-tête, les fonds d’écran, les pochettes d’album et les fonds de marque qui doivent paraître vivants. Les pièges, surtout l’effet boueux et les bandes, sont dans les dégradés maillés.

Grain et texture : la couche du dessus

Le grain n’est pas un type de dégradé, mais il change la lecture de tous les types. Une fine couche de bruit masque les bandes que les fondus lisses peuvent montrer à l’écran, et donne à la couleur numérique un aspect imprimé ou argentique. D’autres matières, comme le papier, le verre et la soie, font le même travail avec une autre voix. Voir les dégradés granuleux pour savoir quelle quantité ajouter.

Quel type de dégradé utiliser

Si vous voulez un fond terminé, avec la couleur, la lumière et le grain déjà équilibrés, c’est exactement ce qu’est un Mark, et vous pouvez créer gratuitement avec n’importe quel Mark du Marché.