N'importe quelle propriété CSS qui accepte comme valeur une image peut utiliser une fonction générant des dégradés de couleurs ( CSS Image Values and Replaced Content Module).
La propriété background-image peut donc servir à remplir un fond avec un dégradé.
Un dégradé peut être linéaire, radial ou répétitif. Il est composé d'au moins 2 couleurs avec leur point d'arrêt. Le point d'arrêt d'une couleur est la coordonnée où la couleur pure s'arrête et où commence la transition continue vers le point d'arrêt d'une autre couleur.

exemple de dégradé linéaire de 2 couleurs
exemple de dégradé linéaire de 3 couleurs

### Dégradés linéaires

Un dégradé linéaire s'étend le long d'une ligne droite orientée et se fait avec la fonction `linear-gradient()` dont la signature est la suivante :
`linear-gradient([[<angle> | to <côté-ou-coin> ],]? <point-arrêt> [, <point-arrêt>]+)`

<angle> Facultatif. Le degradé sera orienté suivant cet angle exprimé sous la forme d'un nombre suivi d'une unité d'angle (`deg`, `grad`, `rad`, `turn` - spécifications).
`0deg` pointe vers le haut et les angles positifs augmentent dans le sens des aiguilles d’une montre : `90deg` pointe vers la droite, `180deg` pointe vers le bas, etc. Si aucun <angle> n'est fourni ou aucun <côté-ou-coin>, le dégradé commence en haut et va vers le bas.

<côté-ou-coin> Facultatif. Définit le côté ou le coin où finit le dégradé (facultatif). La valeur doit commencer par `to`, suivi d'un ou deux mots-clés. Un seul mot-clé définit le côté de fin. Deux mots-clés définissent un angle de fin. Les valeurs suivantes peuvent être utilisées :

- `left` (le dégradé finit à gauche) et `right` (le dégradé finit à droite),
- `top` (le dégradé finit en haut) et `bottom` (le dégradé finit en bas).

<point-arrêt> Il doit y avoir au moins deux points d'arrêt de couleurs. Chaque point d'arrêt de couleur comporte une ou deux valeurs : une couleur et une position (falcultative).
N'importe quelle façon de spécifier une couleur peut être utilisée.
Chaque point d'arrêt peut avoir un pourcentage ou une valeur de longueur qui definit où s'arrête la couleur avant de commencer sa transition vers la couleur du point d'arrêt suivant. Les valeurs peuvent être supérieures ou inférieures aux limites du dégradé. L'affichage résultant sera dans ce cas une "partie" seulement des transitions entre les 2 couleurs.

Exemple : dégradés linéaires
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div>De haut en bas</div> <div>De bas en haut</div> <div>De gauche à droite</div> <div>De droite à gauche</div> </body> </html>
Fichier CSS : styles.css
div { width: 400px; height: 150px; margin: 10px auto; border: 1px solid; line-height: 150px; text-align: center; } /* de haut en bas */ div:nth-of-type(1) { background-image: linear-gradient(brown 10%, orange 90%); } /* de bas en haut */ div:nth-of-type(2) { background-image: linear-gradient(0deg, brown 10%, orange 90%); } /* de gauche à droite */ div:nth-of-type(3) { background-image: linear-gradient(90deg, brown 10%, orange 90%); } /* de droite à gauche */ div:nth-of-type(4) { background-image: linear-gradient(270deg, brown 10%, orange 90%); }

Vous pouvez tester le rendu avec n'importe quel autre angle (pas forcément des multiples de 90).

#### Dégradé linéaire

Reprenez l'exemple précédent en modifiant l'angle des dégradé pour utiliser la forme <côté-ou-coin>.

Une solution possible

Exercice : dégradés linéaires
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div>De haut en bas</div> <div>De bas en haut</div> <div>De gauche à droite</div> <div>De droite à gauche</div> </body> </html>
Fichier CSS : styles.css
div { width: 400px; height: 150px; margin: 10px auto; border: 1px solid; line-height: 150px; text-align: center; } /* de haut en bas */ div:nth-of-type(1) { background-image: linear-gradient(to bottom, brown 10%, orange 90%); } /* de bas en haut */ div:nth-of-type(2) { background-image: linear-gradient(to top, brown 10%, orange 90%); } /* de gauche à droite */ div:nth-of-type(3) { background-image: linear-gradient(to right, brown 10%, orange 90%); } /* de droite à gauche */ div:nth-of-type(4) { background-image: linear-gradient(to left, brown 10%, orange 90%); }

#### Dégradés subtiles

Des dégradés entres couleurs proches sont souvent utilisés par exemple comme fond pour des boutons.

Exemple : dégradés subtiles
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <input type="submit" class="btn1" value="Bouton 1"> <input type="submit" class="btn2" value="Bouton 2"> <input type="submit" class="btn3" value="Bouton 3"> <input type="submit" class="btn4" value="Bouton 4"> <input type="submit" class="btn5" value="Bouton 5"> <input type="submit" class="btn6" value="Bouton 6"> </body> </html>
Fichier CSS : styles.css
input[type="submit"] { width: 100px; height: 2em; margin: 10px; border: none; border-radius: 0.4em; cursor: pointer; } .btn1 { background: linear-gradient(#c24947, #e74c3c); } .btn2 { background: linear-gradient(#fedd45, #eebb0a); } .btn3 { background: linear-gradient(#808080, #b0b0b0); } .btn4 { background: linear-gradient(#6b6b6b, #030207); } .btn5 { background: linear-gradient(#878f92, #002431); } .btn6 { background: linear-gradient(#40c081, #1b4c34); } .btn4, .btn5, .btn6 { color: #fff; }

#### Dégradés avec plus de 2 couleurs

Exemple : dégradés linéaires
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div></div> <div></div> </body> </html>
Fichier CSS : styles.css
body { background-image: linear-gradient(270deg, black, white); } div { width: 400px; height: 200px; margin: 10px auto; border: 1px solid; } div:nth-of-type(1) { background: linear-gradient(360deg, rgba(255, 0, 0, 0.2) 0, black 50%, rgba(0, 255, 0, 0.2) 100%); } div:nth-of-type(2) { background-image: linear-gradient(155deg, rgb(255, 0, 0), rgb(255, 42, 0), rgb(255, 85, 0), rgb(255, 127, 0), rgb(255, 170, 0), rgb(255, 212, 0), rgb(255, 255, 0), rgb(212, 255, 0), rgb(169, 255, 0), rgb(127, 255, 0), rgb(84, 255, 0), rgb(42, 255, 0), rgb(0, 255, 0), rgb(0, 255, 42), rgb(0, 255, 84), rgb(0, 255, 127), rgb(0, 255, 169), rgb(0, 255, 212), rgb(0, 255, 254), rgb(0, 212, 255), rgb(0, 169, 255), rgb(0, 127, 255), rgb(0, 85, 255), rgb(0, 42, 255), rgb(0, 0, 255), rgb(42, 0, 255), rgb(85, 0, 255), rgb(127, 0, 255), rgb(170, 0, 255), rgb(212, 0, 255), rgb(254, 0, 255), rgb(255, 0, 212), rgb(255, 0, 169), rgb(255, 0, 127), rgb(255, 0, 85), rgb(255, 0, 42), rgb(255, 0, 0)); }

### Dégradés radiaux

Les dégradés radiaux partent d'un centre et s'étendent vers l'extérieur en formant un cercle ou une ellipse. On utilise la fonction `radial-gradient` pour les définir :
`radial-gradient([[ <forme> || <taille> ] [ at <position> ]? , | at <position> , ]? <point-arrêt> [ , <point-arrêt> ]+)`

<forme> Facultative. Indique la forme finale du dégradé :

- `ellipse` : le dégradé a la forme d'une ellipse.
- `circle` : le dégradé a la forme d'un cercle.

Si <forme> est omise, la forme finale est un cercle si <taille> n'a qu'une seule longueur ou une ellipse si <taille> a deux longueurs.

<taille> Facultative. Définit la taille finale du dégradé. Valeur par défaut : `farthest-corner`. Les valeurs peuvent êtres des longueurs ou des mots-clés.

Si <taille> est une longueur

- il peut y avoir ou deux valeurs de longueur séparées par des espaces,
- si il y a une seule valeur de longueur elle indique le rayon d'un dégradé qui aura la forme d'un cercle,
- si il y a deux valeurs, la première valeur représente le rayon horizontal et la seconde le rayon vertical d'un dégradé en forme d'ellipse,
- les pourcentages ne peuvent être utilisés que pour la taille d'un dégradé elliptique

Les mots-clés utilisables sont : `closest-side`, `closest-corner`, `farthest-side` et `farthest-corner`.

longueur du dégradé par rapport aux côtés
longueur du dégradé par rapport aux coins

Pour les dégradés elliptiques avec `closest-corner`, la forme du dégradé a le même rapport largeur-hauteur que si le mot clé `closest-side`.
Pour les dégradés elliptiques avec `farthest-corner`, la forme du dégradé a le même rapport largeur-hauteur que si le mot clé `farthest-side`

<position> Facultative. Indique le centre du dégradé et peut prendre les mêmes valeurs que la propriété background-position. La valeur par défaut est `center`.

<point-arrêt> Il doit y avoir au moins deux points d'arrêt de couleurs. Chaque point d'arrêt de couleur comporte une ou deux valeurs : une couleur et une position (falcultative).
N'importe quelle façon de spécifier une couleur peut être utilisée.
Chaque point d'arrêt peut avoir un pourcentage ou une valeur de longueur qui definit où s'arrête la couleur avant de commencer sa transition vers la couleur du point d'arrêt suivant. 0 correspond au centre du dégradé et 100% désigne l'endroit ou s'arrête la forme finale. Les valeurs peuvent être supérieures ou inférieures aux limites du dégradé. L'affichage résultant sera dans ce cas une "partie" seulement des transtions entre les 2 couleurs.

Exercice : dégradés radiaux
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <section> <h2>La Guerre des Etoiles du Milieu</h2> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron.</p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> </section> </body> </html>
Fichier CSS : styles.css
html { height: 100%;} /* force la hauteur de page pour que le dégradé aille bien en bas de la page */ body { background: radial-gradient(ellipse at top center, cyan, black); } section { width: 400px; margin: 1em auto; } p { margin: 1em 0; padding: 1em; border-radius: 1em; } p:nth-of-type(1) { background-image: radial-gradient(closest-side at 20px 25px, white, rgba(0, 255, 255, 0.2)); } p:nth-of-type(2) { background-image: radial-gradient(ellipse at bottom center, black, rgba(0, 255, 255, 0.2)); } p:nth-of-type(3) { background-image: radial-gradient(ellipse at 30% 35%, white, rgba(0, 255, 255, 0.2)); }

### Dégradés répétitifs

#### Dégradés linéraires répétitifs

La fonction `repeating-linear-gradient()` permet de créer des dégradés linéraires répétitifs. Les paramètres sont les mêmes que ceux de la fonction linear-gradient().
`repeating-linear-gradient([[<angle> | to <côté-ou-coin> ],]? <point-arrêt> [, <point-arrêt>]+)`

Quand le dernier point d'arrêt de couleur est atteint, le dégradé recommence au premier point d'arrêt de couleur et se répète. Pour ne pas avoir de changement brusque de couleur, il faut spécifier les mêmes couleurs pour le premier et le dernier point d'arrêt.

Exemple : dégradés linéaires répétitifs
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div>De haut en bas</div> <div>De bas en haut</div> <div>De gauche à droite</div> <div>De droite à gauche</div> </body> </html>
Fichier CSS : styles.css
div { width: 400px; height: 150px; margin: 10px auto; border: 1px solid; line-height: 150px; text-align: center; } /* de haut en bas avec 3 couleurs */ div:nth-of-type(1) { background-image: repeating-linear-gradient(brown, orange 20px, brown 40px); } /* de bas en haut avec 3 couleurs */ div:nth-of-type(2) { background-image: repeating-linear-gradient(0deg, brown, orange 20%, brown 40%); } /* de gauche à droite avec 2 couleurs */ div:nth-of-type(3) { background-image: repeating-linear-gradient(90deg, brown 10%, orange 20%); } /* de droite à gauche avec 2 couleurs */ div:nth-of-type(4) { background-image: repeating-linear-gradient(270deg, brown 20px, orange 40px); }

#### Dégradés radiaux répétitifs

La fonction `repeating-radial-gradient()` permet de créer des dégradés radiaux répétitifs. Les paramètres sont les mêmes que ceux de la fonction radial-gradient().
`repeating-radial-gradient([[ <forme> || <taille> ] [ at <position> ]? , | at <position> , ]? <point-arrêt> [ , <point-arrêt> ]+)`

Quand le dernier point d'arrêt de couleur est atteint, le dégradé recommence au premier point d'arrêt de couleur et se répète. Pour ne pas avoir de changement brusque de couleur, il faut spécifier les mêmes couleurs pour le premier et le dernier point d'arrêt.

Exemple : dégradés radiaux répétitifs
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div>Ellipse centrée 3 couleurs</div> <div>Cercle 3 couleurs</div> <div>Closest-side 2 couleurs</div> <div>Farthest-side 2 couleurs</div> </body> </html>
Fichier CSS : styles.css
div { width: 400px; height: 150px; margin: 10px auto; border: 1px solid; line-height: 150px; text-align: center; } /* ellipse centrée avec 3 couleurs */ div:nth-of-type(1) { background-image: repeating-radial-gradient(brown, orange 20px, brown 40px); } /* cercle 3 couleurs */ div:nth-of-type(2) { background-image: repeating-radial-gradient(circle at 50px 50px, brown, orange 20%, brown 40%); } /* cercle 2 couleurs */ div:nth-of-type(3) { background-image: repeating-radial-gradient(closest-side circle, brown 10%, orange 20%); } /* cercle 2 couleurs */ div:nth-of-type(4) { background-image: repeating-radial-gradient(farthest-side circle, brown 10%, orange 20%); }