Appliquer un dégradé au fond d'un élément

Un dégradé permet de faire passer une couleur vers une autre sans utiliser d'image. En CSS, on peut créer ce type de fond avec linear-gradient(). Nous allons le découvrir en commençant par deux couleurs, puis en changeant son sens et en ajoutant des étapes de couleur.

Introduction à la propriété linear-gradient()

Pour créer un dégradé linéaire, on utilise la fonction linear-gradient(). Cette fonction s'emploie le plus souvent avec la propriété background-image, car un dégradé est traité comme une image de fond par le navigateur.

La syntaxe la plus simple ressemble à ceci :

						
							<div class="bandeau">
								Mon bandeau
							</div>
						
					

						
							.bandeau{
								padding: 30px;
								background-image: linear-gradient(skyblue, royalblue);
								color: white;
							}
						
					

Le fond passe progressivement d'un bleu clair à un bleu plus soutenu.

Comme pour une autre image de fond, il faut un peu d'espace pour bien voir le résultat. Ici, le padding aide à donner de la hauteur au bloc.

Définir deux couleurs pour un dégradé

Au début, retenez surtout ceci : un dégradé simple fonctionne avec deux couleurs. La première correspond au point de départ, la seconde au point d'arrivée.

Vous pouvez utiliser des noms de couleurs, des valeurs hexadécimales, rgb() ou hsl().

						
							.carte{
								padding: 25px;
								background-image: linear-gradient(#ffd166, #ef476f);
							}
						
					

						
							<div class="carte">
								Une carte colorée
							</div>
						
					

Le navigateur mélange ici progressivement les deux couleurs.

Si vous n'indiquez rien d'autre, le dégradé descend du haut vers le bas. C'est le comportement par défaut.

Définir le sens du dégradé

Vous pouvez choisir la direction du dégradé avec des mots-clés comme to right, to left, to top ou to bottom.

La direction se place au début de la fonction, avant les couleurs.

						
							.bouton_large{
								padding: 25px;
								background-image: linear-gradient(to right, #06d6a0, #118ab2);
								color: white;
							}
						
					

						
							.encadre{
								padding: 25px;
								background-image: linear-gradient(to left, #06d6a0, #118ab2);
								color: white;
							}
						
					

La première couleur commence à gauche et la seconde se trouve vers la droite.

Cette écriture est très pratique quand vous voulez raisonner visuellement sans encore penser en angles.

Définir le sens du dégradé en degrés

Si vous voulez être plus précis, vous pouvez aussi indiquer un angle en deg. Cela permet de pencher le dégradé exactement comme vous le souhaitez.

Par exemple, 90deg donne un dégradé horizontal, tandis que 45deg crée une diagonale.

						
							.diagonale{
								padding: 30px;
								background-image: linear-gradient(45deg, #ff9f1c, #8338ec);
								color: white;
							}
						
					

						
							.horizontale{
								padding: 30px;
								background-image: linear-gradient(90deg, #ff9f1c, #8338ec);
								color: white;
							}
						
					

Avec 45deg, la transition suit une diagonale.

Au début, vous n'avez pas besoin de retenir toutes les valeurs possibles. L'idée importante est de comprendre que les degrés offrent un réglage plus précis que les mots-clés.

Définir plusieurs couleurs de dégradé

Un dégradé n'est pas limité à deux couleurs. Vous pouvez ajouter autant d'étapes que nécessaire en séparant les couleurs par des virgules.

Chaque couleur vient s'insérer entre la précédente et la suivante.

						
							.arc_en_ciel{
								padding: 30px;
								background-image: linear-gradient(to right, #ff595e, #ffca3a, #8ac926, #1982c4);
								color: white;
							}
						
					

						
							<div class="arc_en_ciel">
								Plusieurs couleurs
							</div>
						
					

Le dégradé passe ici par plusieurs étapes de couleur au lieu d'une seule transition.

Cette technique est utile pour obtenir des fonds plus riches, ou pour marquer plusieurs zones dans une même direction.

Créer des dégradés complexes

Pour aller plus loin, vous pouvez indiquer non seulement les couleurs, mais aussi leur position dans le dégradé. On parle alors souvent de color stops.

Cela permet par exemple de faire une transition très courte, de garder une couleur plus longtemps, ou de créer un effet de bandes.

						
							.bande_complexe{
								padding: 30px;
								background-image: linear-gradient(
									90deg,
									#073b4c 0%,
									#073b4c 25%,
									#118ab2 25%,
									#118ab2 55%,
									#06d6a0 55%,
									#ffd166 100%
								);
								color: white;
							}
						
					

						
							<div class="bande_complexe">
								Dégradé plus complexe
							</div>
						
					

En fixant des positions précises, on obtient un rendu plus construit qu'un simple fondu régulier.

Attention tout de même : plus un dégradé devient précis, plus le code devient dense. Quand vous débutez, il vaut mieux commencer par deux couleurs, puis ajouter progressivement de nouveaux réglages.