L’essentiel en bref
- L’angle d’un dégradé décide d’où semble venir sa lumière et par où l’œil parcourt un design.
- Les dégradés plus clairs en haut paraissent en général naturels et calmes, car on s’attend à ce que la lumière vienne d’en haut.
- Les dégradés en diagonale paraissent plus énergiques que les verticaux ou horizontaux, et sont le choix le plus courant pour les fonds et les boutons.
- En CSS, 0deg pointe vers le haut et les angles tournent dans le sens horaire : 90deg va de gauche à droite et la valeur par défaut est 180deg, de haut en bas.
- Les mots-clés de coin comme to top right s’adaptent à la forme de la boîte, alors qu’un angle fixe comme 45deg ne le fait pas.
Sur cette page
L’angle d’un dégradé est la direction dans laquelle changent ses couleurs, et il travaille plus que la plupart ne le croient. Il décide d’où semble venir la lumière, où l’œil commence et finit, et si le design paraît calme, exaltant ou agité. En règle générale, plus clair en haut paraît naturel, les diagonales paraissent énergiques, et l’extrémité claire doit se tenir loin de vos mots. En CSS, les angles partent de 0deg vers le haut et tournent dans le sens horaire.
Comment la direction du dégradé change l’impression
| Direction | Impression | Bon pour |
|---|---|---|
| Clair en haut, sombre en bas | Naturel, calme, ancré, comme le ciel sur la terre | Fonds, sites web, surfaces de lecture |
| Clair en bas, sombre en haut | Rayonnant, théâtral, comme l’aube ou une scène | Scènes de nuit, drame, dévoilement de produit |
| De gauche à droite | Progression, temps, voyage | Frises chronologiques, barres de progression, bannières |
| Diagonale | Énergie, mouvement, élan | Posts, boutons, couvertures, lancements |
| Radial depuis un coin | Un projecteur, une source de lumière | Bandeaux, couvertures, focus sur une zone |
La lumière d’en haut
On suppose volontiers que la lumière vient d’en haut, parce que c’est presque toujours le cas, du soleil ou d’un plafond. Un dégradé plus clair en haut répond à cette attente : il se lit donc comme naturel et calme, comme le ciel sur la terre, un mur éclairé, un objet doucement éclairé. Inversez-le pour que la lumière soit en bas, et les mêmes couleurs paraissent théâtrales, comme un feu de camp, une scène ou un écran qui brille dans le noir. Aucun n’est faux, mais le second doit être un choix.
La même attente touche les boutons et les cartes. Une surface légèrement plus claire en haut paraît en relief ; une surface plus claire en bas paraît enfoncée. C’est bon à savoir quand vous ajoutez un dégradé subtil à un bouton en dégradé.
Les diagonales et l’énergie
Les lignes diagonales évoquent le mouvement, car elles paraissent instables comparées aux verticales et aux horizontales. C’est pourquoi les diagonales, surtout du haut gauche vers le bas droit, sont le choix le plus courant pour les posts sociaux, les boutons et les visuels de lancement. Le départ en haut à gauche correspond aussi à l’endroit où commencent une page les lecteurs des langues écrites de gauche à droite : l’extrémité claire les accueille donc en premier.
Des diagonales plus raides ou plus douces changent l’ambiance. Vers 100 à 120 degrés, c’est presque vertical avec une légère inclinaison, calme mais pas statique. Vers 150 à 160 degrés, on dirait une lumière tardive qui rase une surface. Un 45 ou 135 précis est le plus dynamique, et aussi le plus courant, ce qui est une raison d’essayer quelque chose de légèrement différent pour vous démarquer ; voyez les dégradés à deux couleurs.
Gardez la lumière loin des mots
La direction est aussi une mise en page. L’extrémité vive d’un dégradé attire l’œil : placez-la donc là où vous voulez l’attention, et gardez le texte sur l’extrémité plus calme où le contraste est plus stable. Un titre en haut d’un post convient à un dégradé qui s’assombrit vers le haut, avec la lueur dans le coin du bas, ou l’inverse avec un texte sombre.
Quand la partie la plus vive du champ tombe sur le titre, les mots et la lumière se font concurrence.
La lumière éloignée des mots : l’œil voyage toujours, et le titre tient.
Comment fonctionnent les angles de dégradé en CSS
En CSS, l’angle d’un dégradé linéaire décrit la direction que suivent les couleurs. 0deg pointe droit vers le haut, et les angles tournent dans le sens horaire : 90deg va de gauche à droite, 180deg de haut en bas et 270deg de droite à gauche. Si vous omettez l’angle, la valeur par défaut est 180deg. Vous pouvez aussi utiliser des mots-clés comme to right et to bottom left.
/* These pairs are identical */
.a { background: linear-gradient(90deg, #fde68a, #7c2d12); }
.b { background: linear-gradient(to right, #fde68a, #7c2d12); }
.c { background: linear-gradient(180deg, #fde68a, #7c2d12); }
.d { background: linear-gradient(#fde68a, #7c2d12); } /* default: to bottom */
/* These are only identical in a square box */
.e { background: linear-gradient(45deg, #fde68a, #7c2d12); }
.f { background: linear-gradient(to top right, #fde68a, #7c2d12); }La différence de la dernière paire compte sur les bannières et les stories. Un angle fixe comme 45deg court toujours à 45 degrés, quelle que soit la forme. Un mot-clé de coin comme to top right incline l’angle pour s’adapter à la boîte : la couleur du milieu passe exactement entre les deux autres coins. Sur une large bannière 3:1, to top right donne environ 18deg, bien plus proche de la verticale que 45deg, car les bandes de couleur doivent suivre la longue diagonale. Utilisez les mots-clés quand vous voulez que le dégradé aille d’un coin à l’autre sur n’importe quelle forme ; utilisez les degrés quand vous voulez la même inclinaison partout.
| Mot-clé | Angle | Sens du trajet |
|---|---|---|
to top | 0deg | Du bas vers le haut |
to right | 90deg | De gauche à droite |
to bottom | 180deg | De haut en bas (par défaut) |
to left | 270deg | De droite à gauche |
to bottom right | 135deg dans un carré seulement | Du coin haut gauche au coin bas droit |
Choisir une direction, pas à pas
- 1
Décidez d’où vient la lumière
D’en haut pour le calme et le naturel, d’en bas pour la lueur et le drame, d’un coin pour un projecteur.
- 2
Placez d’abord les mots
Mettez le titre là où il va dans la mise en page, puis faites courir le dégradé pour que son extrémité calme soit derrière lui.
- 3
Choisissez l’inclinaison selon l’ambiance
Verticale pour le calme, diagonale pour l’énergie, horizontale pour la progression.
- 4
Vérifiez chaque format
Une direction qui marche sur un carré peut placer la lumière au mauvais endroit sur une story ou une bannière. Ajustez par taille plutôt que de recadrer.
Pour le reste de la syntaxe des dégradés linéaires, voyez les dégradés linéaires CSS. Pour d’autres formes qui n’ont pas du tout de direction unique, voyez les types de dégradés. Les Marks de Gradiently sont rendus pour chaque taille dans laquelle vous créez : leur lumière tombe donc à un endroit sensé sur chaque format plutôt que là où un recadrage la laisse.
Les questions qu’on nous pose
Quel est le meilleur angle pour un dégradé ?
Il n’y a pas d’angle idéal unique. Plus clair en haut paraît naturel et calme, les diagonales autour de 135 degrés paraissent énergiques, et l’extrémité claire doit se tenir loin de votre texte.
Vers où pointe 0deg dans un dégradé CSS ?
Vers le haut. 0deg va du bas vers le haut, et les angles tournent dans le sens horaire : 90deg va de gauche à droite et 180deg de haut en bas.
Quelle est la direction par défaut d’un dégradé linéaire CSS ?
De haut en bas, comme 180deg ou to bottom.
45deg est-il pareil que to top right ?
Seulement dans une boîte carrée. to top right s’adapte à la forme de la boîte pour que le dégradé aille d’un coin à l’autre, alors que 45deg garde la même inclinaison sur toute forme.
Pourquoi mon dégradé paraît-il à l’envers après l’avoir copié d’un outil de design ?
De nombreux outils de design mesurent les angles autrement que le CSS. Vérifiez la direction visuellement et ajustez l’angle CSS.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
