Comment faire un dégradé de couleur en HTML et CSS ?

Réponses rédigées par Antoine
Dernière mise à jour : 2021-04-05 12:37:52
Thèmes : webmaster - html - css - couleur
Question

Comment puis-je faire un dégradé de couleur en HTML et CSS ?

Réponse

Pour passer d'une couleur à une autre, avec un effet de dégradé, en HTML, vous pouvez associer la fonction CSS linear-gradient() à la propriété CSS background.

La fonction linear-gradient() contient 3 paramètres :

  • La direction, exprimée avec un mot clef ou en degrés (to bottom correspond à 180°).
  • La couleur de départ.
  • La couleur de fin.

Voici un exemple pour appliquer au fond d'une page, un dégradé du gris au noir, de haut en bas :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment faire un dégradé de couleur en HTML et CSS ?</title>
<style> 
body {
height: 100vh;
background: linear-gradient(to bottom, grey, black);
} 
</style> 
</head>
<body>
</body>
</html>

Remarque : Vous trouverez d'avantage d'information sur les manières de réaliser des dégradés de couleur, en HTML et CSS, via cette page du site de Mozilla.