Dégradés CSS

Table des matières

    Afficher la table des matières

Arrière-plans dégradés :

Gradient Backgrounds

Les dégradés CSS vous permettent d'afficher des transitions fluides entre deux ou plusieurs couleurs spécifiées.

CSS définit trois types de dégradés :

  • Dégradés linéaires (descend/monte/gauche/droite/en diagonale)

  • Dégradés radiaux (définis par leur centre)

  • Dégradés coniques (rotation autour d'un point central)

Dégradés linéaires CSS

Pour créer un dégradé linéaire, vous devez définir au moins deux arrêts de couleur. Les arrêts de couleur sont les couleurs avec lesquelles vous souhaitez restituer des transitions douces parmi. Vous pouvez également définir un point de départ et une direction (ou un angle) le long avec l'effet dégradé.

Syntaxe

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Direction - De haut en bas (valeur par défaut)

L'exemple suivant montre un dégradé linéaire qui commence par le haut. Il commence en rouge, puis passe au jaune :

top to bottom (default)

Exemple

  #grad {
  background-image: linear-gradient(red, yellow);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>

<div id="grad1"></div>

</body>
</html>

Direction - De gauche à droite

L'exemple suivant montre un dégradé linéaire qui commence à gauche. Il commence en rouge, puis passe à jaune:

left to right

Exemple

  #grad {
  background-image: linear-gradient(to right, red , yellow);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Left to Right</h1>
<p>This linear gradient starts red at the left, transitioning to yellow (to the right):</p>

<div id="grad1"></div>

</body>
</html>

Direction - Diagonale

Vous pouvez créer un dégradé en diagonale en spécifiant les positions de départ horizontale et verticale.

L'exemple suivant montre un dégradé linéaire qui commence en haut à gauche (et va en bas à droite). Il commence en rouge, puis passe au jaune :

top left to bottom right

Exemple

   #grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Diagonal</h1>
<p>This linear gradient starts red at top left, transitioning to yellow (at bottom right):</p>

<div id="grad1"></div>

</body>
</html>

Utiliser des 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 en haut, à droite, à gauche, en bas à droite, etc.). Une valeur de 0deg équivaut à "en haut". Une valeur de 90 degrés équivaut à « à droite ». Une valeur de 180 degrés équivaut à "vers le bas".

Syntaxe

background-image: linear-gradient(angle, color-stop1, color-stop2);

L'exemple suivant montre comment utiliser les angles sur des dégradés linéaires :

180deg

Exemple

  #grad {
  background-image: linear-gradient(180deg, red, yellow);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(0deg, red, yellow);
}

#grad2 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(90deg, red, yellow);
}

#grad3 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(180deg, red, yellow);
}

#grad4 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradients - Using Different Angles</h1>

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

</body>
</html>

Utilisation de plusieurs arrêts de couleur

L'exemple suivant montre un dégradé linéaire (de haut en bas) avec plusieurs arrêts de couleur :

Exemple

  #grad {
  background-image: linear-gradient(red, yellow, green);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow, green);
}

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red 10%, green 85%, blue 90%);
}
</style>
</head>
<body>

<h1>Linear Gradients - Multiple Color Stops</h1>
<p><strong>Note:</strong> Color stops are spaced evenly when no percents are specified.</p>

<h2>3 Color Stops (evenly spaced):</h2>
<div id="grad1"></div>

<h2>7 Color Stops (evenly spaced):</h2>
<div id="grad2"></div>

<h2>3 Color Stops (not evenly spaced):</h2>
<div id="grad3"></div>

</body>
</html>

L'exemple suivant montre comment créer un dégradé linéaire (de gauche à droite) avec la couleur de l'arc-en-ciel et du texte :

Rainbow Background

Exemple

   #grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 55px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Rainbow Background
</div>

</body>
</html>

Utiliser la transparence

Les dégradés CSS prennent également en charge la transparence, qui peut être utilisée pour créer des effets de fondu.

Pour ajouter de la transparence, nous utilisons la fonction rgba() pour définir les arrêts de couleur. Le dernier paramètre de la fonction rgba() peut être une valeur comprise entre 0 et 1, et il définit la transparence de la couleur : 0 indique une transparence totale, 1 indique la couleur (pas de transparence).

L'exemple suivant montre un dégradé linéaire qui commence à gauche. Il commence entièrement transparent, passant au rouge complet :

Exemple

  #grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), 
rgba(255,0,0,1));
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>

<h1>Linear Gradient - Transparency</h1>
<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).</p>

<div id="grad1"></div>

</body>
</html>

Répéter un dégradé linéaire

La fonction repeating-linear-gradient() est utilisée pour répéter des dégradés linéaires :

Exemple

Un dégradé linéaire répétitif :

   #grad {
  background-image: 
repeating-linear-gradient(red, yellow 10%, green 20%);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
}

#grad4 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
}

#grad5 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg, red 0px, red 10px, red 10px, yellow 10px, yellow 20px);
}
</style>
</head>
<body>

<h1>Repeating Linear Gradient</h1>

<div id="grad1"></div>

<p>A repeating gradient on 45deg axe starting red and finishing green:</p>
<div id="grad2"></div>

<p>A repeating gradient on 190deg axe starting red and finishing green:</p>
<div id="grad3"></div>

<p>A repeating gradient on 90deg axe starting red and finishing green:</p>
<div id="grad4"></div>

<p>A repeating linear gradient with solid stripes:</p>
<div id="grad5"></div>

</body>
</html>