Une erreur de script s'est produite sur cette page. En attendant qu'elle soit traitée par les éditeurs du site, vous pouvez consulter le contenu partiel ci-dessous.

{{ CSSRef }}

Les dégradés CSS sont représentés par le type de donnée <gradient> qui est un sous-ensemble du type <image>. L'utilisation de dégradés CSS permet d'afficher des transitions douces entre deux couleurs ou plus. Il existe deux sortes de degradés : les dégradés linéaires (cf. linear-gradient et les dégradés radiaux (cf. radial-gradient).

Les dégradés peuvent être utilisés à chaque endroit où on peut utiliser une image (par exemple les arrière-plans). En évitant d'utiliser des images pour ces effets, le temps de téléchargement et la bande passante utilisée sont réduits. En outre, comme le dégradé est généré par le navigateur, les objets concernés se comporteront mieux en cas de zoom et votre mise en page peut être ajustée de manière plus flexible.

Dégradés linéaires

Pour créer un dégradé linéaire, définissez un point de départ et une direction (sous la forme d'un angle) selon laquelle l'effet de dégradé sera appliqué. Vous pouvez également définir des arrêts de couleurs. Ceux-ci représentent les couleurs entre lesquelles Gecko doit rendre des transitions douces, et deux au moins doivent être spécifiés, mais vous pouvez en indiquer plus pour obtenir des effets plus complexes.

Dégradés linéaires simples

Voici un dégradé linéaire qui commence au centre (horizontalement) et en haut (verticalement), du bleu vers le blanc.

CSS

.linear-gradient {
  background: linear-gradient(blue, white);
}

.div {
  width: 100px;
  height: 100px;
}

HTML

<div class="linear-gradient"></div>

Résultat

Appliquer un dégradé de gauche à droite

CSS

.linear-gradient {
  background: linear-gradient(to right, blue, white);
}

.div {
  width: 100px;
  height: 100px;
}

HTML

<div class="linear-gradient"></div>

Résultat

Appliquer un dégradé en diagonale

CSS

.linear-gradient {
  background: linear-gradient(to bottom right, blue, white);
}

.div {
  width: 100px;
  height: 100px;
}

HTML

<div class="linear-gradient"></div>

Résultat

Utilisation d'angles

Si aucun angle n'est spécifié, il sera déterminé automatiquement à partir de la position de départ. Si vous désirez un meilleur contrôle sur la direction du dégradé, vous pouvez définir cet angle précisément.

CSS

.linear-gradient {
  background: linear-gradient(70deg, blue, pink);
}

.div {
  width: 100px;
  height: 100px;
}

HTML

<div class="linear-gradient"></div>

Résultat

L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens inverse des aiguilles d'une montre. Autrement dit, 0deg crée un dégradé vertical de bas en haut, tandis que 90deg génère un dégradé horizontal de la gauche vers la droite :

linear_redangles.png

background: linear-gradient(<angle>, red, white);

Utiliser plus de deux couleurs

Les dégradés CSS ne sont pas limités à deux couleurs, il est possible d'en utiliser autant que souhaité :

CSS

.linear-gradient {
  background: linear-gradient(red, yellow, blue, orange);
}

.div {
  width: 100px;
  height: 100px;
}

HTML

<div class="linear-gradient"></div>

Résultat

Arrêts de couleurs

Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise. Leur emplacement peut être spécifié sous la forme d'un pourcentage de la longueur de la ligne, ou d'une longueur absolue. Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré. Si vous spécifiez un pourcentage, 0% indique le point de départ, et 100% le point d'arrivée ; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré.

CSS

.linear-gradient {
  background: linear-gradient(to left, lime, lime 28px, red 77%, cyan);
}

.div {
  width: 100px;
  height: 100px;
}

HTML

<div class="linear-gradient"></div>

Résultat

Notez que la première et la dernière couleur n'indiquent pas d'emplacement ; en conséquence les valeurs 0% et 100% sont assignées automatiquement. La couleur centrale indique un emplacement à 80%, ce qui la place proche du bas.

Transparence et dégradés

Les gradients gèrent la transparence. Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple :

CSS

.linear-gradient {
  background: linear-gradient(to right, transparent, mistyrose),
      url("https://mdn.mozillademos.org/files/15525/critters.png");
}

.div {
  width: 300px;
  height: 150px;
}

HTML

<div class="linear-gradient"></div>

Résultat

Les fonds sont superposés avec le premier fond spécifié au dessus, et chaque fond supplémentaire par dessous.

Empilement de dégradés

Il est possible d' « empiler » différents dégradés. Il suffit que les dégradés sur les couches supérieures ne soient pas complètement opaques pour qu'on puisse voir ceux des couches inférieures.

CSS

.linear-gradient {
  background:
    linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

.div {
  width: 100px;
  height: 100px;
}

HTML

<div class="linear-gradient"></div>

Résultat

Dégradés radiaux

Les dégradés radiaux sont similaire aux dégradés linéaires mais permettent d'obtenir un effet qui rayonne à partir d'un point. Il est possible de créer des dégradés circulaires ou elliptiques.

Un dégradé radial simple

Note : Dans les exemples suivants, nous continuons d'utiliser le même <div> et, pour ne pas surcharger la lecture, n'afficherons plus que la règle CSS spécifique au dégradé.

De la même façon qu'avec les dégradés linéaires, il suffit de deux couleurs pour créer un dégradé radial.

.simple-radial {
  background: radial-gradient(red, blue);
}

Positionner les points d'arrêt

À nouveau, comme pour les dégradés linéaires, il est possible de placer des arrêts de couleur en précisant un pourcentage ou une distance.

.radial-gradient {
  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
}

Dimensionner les dégradés radiaux

À la différence des dégradés linéaires, il est possible de définir la taille d'un dégradé radial.

Utiliser closest-side pour les ellipses

Dans l'exemple qui suit, on utilise la valeur closest-side pour la taille. Cela signifie que la taille du dégradé sera définie par la distance entre le point central de départ et le côté le plus proche de la boîte englobante.

.radial-ellipse-side {
  background: radial-gradient(ellipse closest-side,
      red, yellow 10%, #1e90ff 50%, beige);
}

Utiliser farthest-corner pour les ellipses

Cet exemple ressemble fortement au précédent mais on utilise ici farthest-corner qui crée un dégradé dont la distance est celle entre le point de départ central et le côté le plus éloigné de la boîte englobante.

.radial-ellipse-far {
  background: radial-gradient(ellipse farthest-corner,
      red, yellow 10%, #1e90ff 50%, beige);
}

Utiliser closest-side pour les cercles

Pour cet exemple, on utilise closest-side qui permet de créer un cercle dont le rayon est la distance entre le point de départ central et le côté le plus proche de la boîte englobante. Ici, le rayon du cercle est donc la moitié de la hauteur de la boîte car les bords haut et bas sont équidistants du point de départ et plus proches que les côtés gauche et droit.

.radial-circle-close {
  background: radial-gradient(circle closest-side,
      red, yellow 10%, #1e90ff 50%, beige);
}

Empiler des dégradés radiaux

À l'instar des dégradés linéaires, on peut empiler des dégradés radiaux. Le premier dégradé indiqué sera celui sur la couche la plus haute et le dernier sera celui sur la couche la plus basse.

.stacked-radial {
  background: 
      radial-gradient(circle at 50% 0,
        rgba(255,0,0,.5),
        rgba(255,0,0,0) 70.71%),
      radial-gradient(circle at 6.7% 75%,
        rgba(0,0,255,.5),
        rgba(0,0,255,0) 70.71%),
      radial-gradient(circle at 93.3% 75%,
        rgba(0,255,0,.5),
        rgba(0,255,0,0) 70.71%) beige;
  border-radius: 50%;
}

Répéter des dégradés

Les propriétés linear-gradient et radial-gradient ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions repeating-linear-gradient et repeating-radial-gradient offrent cette fonctionnalité.

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

Dans cet exemple, on utilise la fonction repeating-linear-gradient afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète.

.repeating-linear {
  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
}

Répéter plusieurs dégradés linéaires

.multi-repeating-linear {
  background:
      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
        rgba(255, 0, 0, 0.5) 300px),
      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
        rgba(255, 0, 0, 0.5) 230px),
      repeating-linear-gradient(23deg, red 50px, orange 100px,
        yellow 150px, green 200px, blue 250px,
        indigo 300px, violet 350px, red 370px);
}

Créer un tartan

.plaid-gradient {
  background:
      repeating-linear-gradient(90deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(0deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(-45deg, transparent, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
      repeating-linear-gradient(45deg, transparent, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
}

Répéter des dégradés radiaux

Ici, on utilise la fonction repeating-radial-gradient afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence.

.repeating-radial {
  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}

Répéter plusieurs dégradés radiaux

.multi-target {
  background:
      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
        rgba(255,255,255,0.5) 30px) top left no-repeat, 
      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
  background-size: 200px 200px, 150px 150px;
}

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, wizAmit, slayslot, teoli, wakka27, FredB, julienw, floEdelmann, BenoitL
 Dernière mise à jour par : SphinxKnight,