# Angle et direction d’un dégradé : quel sens choisir

[Canonical HTML page](https://gradiently.design/fr/guide/gradient-angle)

Les deux mêmes couleurs peuvent paraître calmes, exaltantes ou agitées selon le seul sens dans lequel elles courent. Voici comment choisir une direction exprès, et obtenir l’angle exact en code.

## The short version

- 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.

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

- 180deg : lumière d’en haut: `linear-gradient(180deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`
- 0deg : lueur d’en bas: `linear-gradient(0deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`
- 90deg : de gauche à droite: `linear-gradient(90deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`
- 135deg : diagonale: `linear-gradient(135deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`

Les trois mêmes couleurs dans quatre directions. Rien ne change que l’angle, et chacune raconte une histoire différente.

| 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 |

Ce que suggère en général chaque direction. De gauche à droite se lit comme une progression dans les langues écrites de gauche à droite ; dans les langues de droite à gauche, cela peut paraître inversé.

## 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é](https://gradiently.design/fr/guide/css-gradient-button).

## 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](https://gradiently.design/fr/guide/two-color-gradients).

## 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.

Un post en portrait où la partie la plus vive du dégradé se trouve derrière le titre

Quand la partie la plus vive du champ tombe sur le titre, les mots et la lumière se font concurrence.

Le même post avec la partie vive du dégradé éloignée du titre

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`.

```css
/* 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); }
```

Angles et mots-clés. La dernière paire diffère sur toute boîte qui n’est pas carrée.

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 |

Les mots-clés CSS et leurs angles. Les mots-clés de coin n’égalent un angle fixe que si la boîte est carrée. Voyez [MDN sur linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).

> **Les outils de design comptent autrement** De nombreux outils de design mesurent les angles depuis la droite et tournent dans le sens antihoraire, ou utilisent des poignées à faire glisser au lieu de chiffres. Quand vous passez un dégradé d’un fichier de design au CSS, vérifiez la direction à l’œil plutôt que de recopier le nombre.

## 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](https://gradiently.design/fr/guide/css-linear-gradient). Pour d’autres formes qui n’ont pas du tout de direction unique, voyez [les types de dégradés](https://gradiently.design/fr/guide/types-of-gradients). 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.

## FAQ

### 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.