W3Docs

Apparence

Français

Dégradés CSS ​

Les dégradés CSS affichent des transitions progressives entre deux couleurs ou plus spécifiées. Les dégradés peuvent être utilisés en arrière-plan.

Il existe trois types de dégradés :

Dégradés linéaires ​

La fonction linear-gradient crée une image composée d’une transition fluide entre deux couleurs ou plus le long d’une ligne droite. Elle peut avoir un point de départ et une direction, ainsi que l’effet de dégradé.

Gradients

Syntaxe ​

La syntaxe du dégradé linéaire

css
background-image: linear-gradient(direction, color1, color2, ...);

De haut en bas ​

Par défaut, les dégradés linéaires passent de haut en bas.

Exemple d’un dégradé linéaire de haut en bas : ​

dégradé linéaire de haut en bas

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(#0052b0, #b340b3); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

TIP

Nous ajoutons background-color pour les navigateurs qui ne prennent pas en charge les dégradés.

De gauche à droite ​

Modifier la rotation d’un linear-gradient en spécifiant la direction, en partant de la gauche vers la droite.

Exemple d’un dégradé linéaire de gauche à droite : ​

dégradé linéaire de gauche à droite

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(to right, #0052b0 ,#b340b3); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Dégradés diagonaux ​

Les dégradés peuvent être appliqués en diagonale en spécifiant les positions de départ horizontale et verticale. Ils commencent en haut à gauche et vont vers le bas à droite.

Exemple de dégradé diagonal : ​

dégradé diagonal CSS

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(to bottom right, #0052b0, #b340b3); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Utilisation des angles ​

Définissez un angle au lieu d’une direction pour mieux contrôler la direction du dégradé. 0deg crée un dégradé vertical allant du bas vers le haut, 90deg crée un dégradé horizontal allant de gauche à droite. La spécification d’angles négatifs se fera dans le sens antihoraire.

Exemple d’un dégradé linéaire avec un angle spécifié : ​

dégradé linéaire utilisant un angle

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(70deg, #0052b0, #b340b3); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Effet de plusieurs couleurs ​

Les couleurs des dégradés CSS varient selon la position, produisant des transitions de couleurs fluides. Il n’y a aucune limite au nombre de couleurs utilisées.

Exemple d’un dégradé linéaire avec effet de plusieurs couleurs : ​

dégradé linéaire avec plusieurs couleurs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(#f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Nous pouvons également créer un dégradé linéaire avec effet de plusieurs couleurs en spécifiant une direction. Vous pouvez donner à chaque couleur zéro, une ou deux valeurs de pourcentage ou de longueur absolue. 0% indique le point de départ, tandis que 100% indique le point d’arrivée.

Exemple d’un dégradé linéaire avec plusieurs couleurs de gauche à droite : ​

dégradé linéaire avec plusieurs couleurs de gauche à droite

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(to right, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Exemple d’un dégradé linéaire avec plusieurs couleurs de droite à gauche : ​

dégradé linéaire avec plusieurs couleurs de droite à gauche

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(to left, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Transparence ​

Les dégradés prennent en charge la transparence, vous pouvez donc utiliser plusieurs arrière-plans pour obtenir un effet transparent. Pour y parvenir, vous pouvez utiliser la fonction rgba() pour définir les arrêts de couleur. Le dernier paramètre de la fonction rgba() peut être une valeur de 0 à 1, qui définira la transparence de la couleur. 0 indique une transparence totale, 1 indique une couleur totalement opaque.

Exemple d’un dégradé linéaire de couleur pleine vers transparent : ​

dégradé linéaire transparent

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 200px;
        background-image: linear-gradient(to left, rgba(235, 117, 253, 0), rgba(235, 117, 253, 1));
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Dégradé linéaire répétitif ​

Utilisez la fonction repeating-linear-gradient() pour répéter un dégradé linéaire. Les couleurs se répètent encore et encore à mesure que le dégradé se répète.

Exemple d’un dégradé linéaire répété : ​

dégradé linéaire répété

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 200px;
        background-color: blue;
        background-image: repeating-linear-gradient(55deg, #d5b6de, #6c008a 7%, #036ffc 10%);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Dégradés radiaux ​

Les dégradés radiaux rayonnent à partir d’un point central. Pour créer un dégradé radial, au moins deux arrêts de couleur doivent être spécifiés. Les dégradés radiaux peuvent être circulaires ou elliptiques.

Syntaxe ​

Syntaxe du dégradé radial

css
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Exemple d’un dégradé radial avec trois couleurs : ​

dégradé radial CSS

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background-image: radial-gradient( #ff0509, #fff700, #05ff33); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Positionnement des arrêts de couleur radiaux ​

Comme les dégradés linéaires, les dégradés radiaux prennent également une position spécifiée et une longueur absolue.

Exemple d’arrêts de couleur espacés différemment : ​

arrêts de couleur du dégradé radial positionnés

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue;
        background-image: radial-gradient( #ff0509 10%, #fff700 20%, #05ff33 80%);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Positionnement du centre du dégradé radial ​

Vous pouvez également spécifier la position du centre du dégradé avec un pourcentage ou des longueurs absolues.

Exemple d’un dégradé radial avec centre positionné : ​

centre du dégradé radial positionné

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background-image: radial-gradient(at 0% 30%, #ff0509 10px, #fff700 30%, #05ff33 50%); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Forme du dégradé radial ​

Le paramètre shape définit la forme du dégradé radial. Il peut prendre deux valeurs : circle ou ellipse. La valeur par défaut est ellipse.

Exemple de forme de dégradé radial : ​

dégradé radial circulaire et elliptique CSS

html
<!DOCTYPE html>
<html>
  <head>
    <title> Title of the document</title>
    <style>
      .gradient1 {
        height: 150px;
        width: 200px;
        background-color: blue; 
        background-image: radial-gradient(red, yellow, green);
      }
      .gradient2 {
        height: 150px;
        width: 200px;
        background-color: blue; 
        background-image: radial-gradient(circle, red, yellow, green); 
      }
    </style>
  </head>
  <body>
    <h2>Ellipse:</h2>
    <div class="gradient1"></div>
    <h2>Circle:</h2>
    <div class="gradient2"></div>
  </body>
</html>
Try it Yourself »

Dimensionnement du dégradé radial ​

Contrairement aux dégradés linéaires, la taille des dégradés radiaux peut être spécifiée. Les valeurs sont :

  • closest-corner
  • closest-side
  • farthest-corner(default)
  • farthest-side.

Exemple de dégradés radiaux avec taille spécifiée : ​

dégradé radial CSS closest-corner, closest-side, farthest-corner et farthest-side

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient1 {
        height: 150px;
        width: 150px;
        background-color: blue; 
        background-image: radial-gradient(closest-side at 60% 55%, #ff0509, #fff700, #103601); 
      }
      .gradient2 {
        height: 150px;
        width: 150px;
        background-color: blue; 
        background-image: radial-gradient(farthest-side at 60% 55%, #ff0509, #fff700, #103601); 
      }
      .gradient3 {
        height: 150px;
        width: 150px;
        background-color: blue;
        background-image: radial-gradient(closest-corner at 60% 55%, #ff0509, #fff700, #103601); 
      }
      .gradient4 {
        height: 150px;
        width: 150px;
        background-color: blue; 
        background-image: radial-gradient(farthest-corner at 60% 55%, #ff0509, #fff700, #103601); 
      }
    </style>
  </head>
  <body>
    <h2>closest-side:</h2>
    <div class="gradient1"></div>
    <h2>farthest-side:</h2>
    <div class="gradient2"></div>
    <h2>closest-corner:</h2>
    <div class="gradient3"></div>
    <h2>farthest-corner:</h2>
    <div class="gradient4"></div>
  </body>
</html>
Try it Yourself »

Dégradé radial répétitif ​

La fonction CSS repeating-radial-gradient() crée une image composée de dégradés répétés rayonnant à partir d’une origine.

Exemple du dégradé radial répété : ​

dégradé radial CSS répété

html
<!DOCTYPE html>
<html>
  <head>
    <style>
      .gradient {
        height: 200px;
        width: 200px;
        background-color: blue; 
        background-image: repeating-radial-gradient(#f70000, #f7da00 10%, #005cfa 15%); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Dégradés coniques ​

La fonction conic-gradient crée une image composée d’un dégradé dont les transitions de couleur tournent autour d’un point central.

Syntaxe ​

dégradé conique CSS

css
background-image: conic-gradient(color1, color2);

Exemple d’un dégradé conique de base : ​

dégradé conique CSS

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background: conic-gradient(#ff0000, #fff200);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Positionnement du centre conique ​

Comme pour les dégradés radiaux, le centre du dégradé conique peut être positionné avec un pourcentage ou des longueurs absolues, à l’aide du mot-clé "at".

Exemple d’un dégradé conique avec centre positionné : ​

dégradé conique CSS avec centre positionné

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background: conic-gradient(at 0% 50%, red 10%, yellow 30%, #1eff00 60%);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Changer l’angle ​

L’angle du dégradé conique peut être tourné avec le mot-clé "from".

Exemple de dégradé conique avec angle tourné : ​

dégradé conique CSS avec angle tourné

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background: conic-gradient(from 35deg, #ff0000, #ffa600, #fcf000, #03ff0f, #be05fc, #ff0095);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Dégradé conique répétitif ​

La fonction CSS repeating-conic-gradient() crée une image composée d’un dégradé répétitif dont les transitions de couleur tournent autour d’un point central.

Exemple du dégradé conique répété : ​

dégradé conique CSS répété

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background: repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Practice ​

Quels types de dégradés CSS sont mentionnés dans la page web ?

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.