Dégradé CSS

Les dégradé en CSS est une technique qui vous permet de créer un arrière-plan dégradé pour les sites internet.

Les dégradés sont des éléments CSS du type de données image qui montrent une transition entre deux ou plusieurs couleurs. Ces transitions sont représentées sous forme linéaire ou radiale. Parce qu’ils sont du type de données d’image, les dégradés peuvent être utilisés n’importe où une image peut être. L’utilisation la plus populaire pour les dégradés serait dans un élément d’arrière-plan.

Il y a 2 types de dégradés :

  • Dégradés linéaires (descend/haut/gauche/droite/diagonale)
  • Dégradés radiaux (définis par leur centre)

Alors créons ensemble dégradé linéaire, vous devez définir au moins deux arrêts de couleur. Les arrêts de couleur sont les couleurs entre lesquelles vous souhaitez rendre des transitions fluides. Vous pouvez également définir un point de départ et une direction (ou un angle) avec l’effet de dégradé.

#degrade {
  background-image: linear-gradient(bleu, yellow);
}

Code complet :

<!DOCTYPE html>
<html>
<head>
<style>
#degrade1 {
  height: 300px;
  background-color: bleu; /* si ce n'est pas supporté par votre navigateur */
  background-image: linear-gradient(bleu, yellow);
}
</style>
</head>
<body>

<h1>Le haut</h1>
<p>Voici mon dégradé</p>

<div id="degrade1"></div>

</body>
</html>

Les dégradés CSS en utilisant les angles

Si vous souhaitez plus de contrôle sur la direction du dégradé, vous pouvez définir un angle, au lieu des directions prédéfinies (vers le bas, vers le haut, vers la droite, vers la gauche, vers le bas à droite, etc.). Une valeur de 0deg équivaut à « to top ». Une valeur de 90deg équivaut à « à droite ». Une valeur de 180deg équivaut à « vers le bas ».

La syntaxe

background-image: linear-gradient(angle, couleur1, couleur2);

Exemple complet :

<!DOCTYPE html>
<html>
<head>
<style>
#degrade {
  height: 130px;
  background-image: linear-gradient(0deg, red, yellow);
}

#degrade2 {
  height: 130px
  background-image: linear-gradient(180deg, red, yellow);
}
</style>
</head>
<body>

<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">180deg</div><br>

</body>
</html>

Nos autres cours