Mis à jour le vendredi 6 octobre 2017
  • 6 heures
  • Moyenne

Les dégradés

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Plus fort que le roquefort, CSS gère maintenant les dégradés ! Et il y en a pour tous les goûts : dégradés linéaires, dégradés radiaux, 2 couleurs, 5 couleurs avec de la transparence... on peut faire beaucoup de choses juste avec une simple ligne de CSS !

Les dégradés peuvent s'appliquer sur le fond (background-image) de n'importe quel élément. Voici un aperçu de ce qu'on peut faire (en une seule ligne de CSS !) :

Un dégradé réalisé en une seule ligne de CSS
Un dégradé réalisé en une seule ligne de CSS

Les dégradés sont bien supportés par l'ensemble des navigateurs récents, pas besoin d'utiliser des préfixes (-moz, -webkit...).

On peut aller jusqu'à faire des dégradés assez complexes, mais commençons par ce qu'on a de plus simple voulez-vous.11

Les dégradés linéaires

Un dégradé linéaire est un dégradé simple qui évolue sur une ligne.

Pour commencer, on va créer une page tout ce qu'il y a de plus basique, avec un simple bloc <div>  pour simuler une zone dans laquelle on va dessiner un dégradé :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Dégradés</title>
        <link rel="stylesheet" href="style.css" />
    </head>

    <body>
        <div></div>
    </body>
</html>

Côté CSS, on va cibler le bloc, lui donner des dimensions (pour qu'on puisse voir l'effet) et surtout un fond dégradé :

div
{
    background-image: linear-gradient(blue, green);

    /* Obligatoire si on veut "voir" le dégradé */
    width: 400px;
    height: 300px;
}

Cela crée un dégradé linéaire vertical qui va du bleu au vert, comme ceci :

Un dégradé très simple à exécuter en pur CSS !
Un dégradé très simple à exécuter en pur CSS !

Modifier la direction du dégradé

Par défaut, le dégradé va du haut vers le bas. Vous voulez changer cela ? Eh bien c'est le moment de parler un peu d'anglais. :p

Il suffit d'ajouter un premier paramètre pour indiquer la direction du dégradé. Par exemple, "to right" signifie que le dégradé ira vers la droite :

div
{
    background-image: linear-gradient(to right, blue, green);
}
Un dégradé vers la droite
Un dégradé vers la droite

Voici quelques syntaxes que vous pouvez utiliser pour le premier paramètre :

  • to top : vers le haut

  • to bottom : vers le bas (par défaut)

  • to right : vers la droite

  • to left : vers la gauche

  • to top right : vers en haut à droite

  • to bottom left : vers en bas à gauche

  • etc.

Vous pouvez aussi utiliser des mesures en degrés (90deg signifie "vers la droite", 180deg "vers le bas"...), voire en gradians ou radians si vous n'avez rien oublié de vos cours de maths. :-°

Augmenter le nombre de couleurs du dégradé

Vous pouvez placer autant de couleurs que vous voulez dans votre dégradé : il suffit d'ajouter des couleurs à la suite. Un exemple au hasard :

div
{
    background-image: linear-gradient(to right, blue, green, #0ff, rgb(200, 30, 170));
}

Ce qui nous fait un dégradé qui passe par 4 couleurs différentes :

Un dégradé avec plusieurs couleurs à la suite !
Un dégradé avec plusieurs couleurs à la suite !

Pensez à la transparence

En plus de la notation en anglais (blue), hexadécimale (#00f) et RGB, vous pouvez aussi utiliser la notation RGBA qui permet de définir de la transparence. Et là, magie du système, vous pouvez faire un dégradé qui va de l'opaque vers la transparence !

Voilà ce qu'on peut faire :

Un dégradé qui utilise des couleurs transparentes
Un dégradé qui utilise des couleurs transparentes

Utilisez simplement la notation RGBA des couleurs pour bénéficier des effets de transparence :

div
{
    background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1));
}

Modifier l'espace occupé par chaque couleur

Par défaut, les couleurs se répartissent équitablement dans le dégradé. Mais si vous voulez qu'une couleur occupe plus d'espace ?

Il suffit alors d'ajouter un second paramètre à chaque couleur : une valeur en pourcentage ou pixels pour indiquer à quel endroit commence la nouvelle couleur par rapport à la couleur précédente. Exemple concret :

div
{
    background-image: linear-gradient(to right, blue 0%, green 30%);
}

... signifie que la couleur bleue commence au début (0%, jusque là, normal) et que la couleur verte commence à 30% de l'espace occupé par défaut par la couleur bleue. Ce qui nous donne un dégradé largement dominé par le vert :

Un dégradé dont les couleurs occupent un espace différent
Un dégradé dont les couleurs occupent un espace différent

Vous pouvez aussi indiquer une valeur absolue en pixels :

div
{
    background-image: linear-gradient(to right, blue, green 70px);
}

Les dégradés radiaux

Maintenant que vous êtes experts en dégradés linéaires, les dégradés radiaux ne devraient pas vous poser trop de soucis !

Mais c'est quoi un dégradé "radial" ?

Une image vaut mieux qu'un long discours, voici un dégradé radial !

Un dégradé radial
Un dégradé radial

Cette fois, le dégradé part un peu dans toutes les directions.

Voici comment on peut reproduire l'exemple précédent :

div
{
    background-image: radial-gradient(circle at center, white, green);
}

La valeur commence par radial-gradient  (au lieu de linear-gradient).

Il y a deux formes de dégradé radiaux :

  • circulaire : on utilise le mot-clé circle . On observe un véritable cercle dans le dégradé.

  • elliptique : on utilise le mot-clé ellipse . On observe un cercle "aplati" si la zone du dégradé est aplatie.

Tout comme le scientifique qui vous vend un nouveau produit dentifrice à la télé, j'ai envie de dire "Observez la différence !" :

Un dégradé circulaire (circle)
Un dégradé circulaire (circle) : le cercle est parfait au centre
Un dégradé elliptique (ellipse)
Un dégradé elliptique (ellipse) : le cercle est aplati

Ici c'est un peu subtil mais si vous travaillez sur une zone encore plus aplatie, vous verrez d'autant plus clairement la différence.

Positionner le dégradé

Vous devez aussi indiquer à quel endroit commence le dégradé. Là encore, on peut indiquer "top left" (en haut à gauche), "bottom right" (en bas à droite)... mais aussi "center" (au centre).

Voici ce que ça donne par exemple avec top left :

div
{
    background-image: radial-gradient(circle at top left, white, green);
}
Un dégradé qui commence en haut à gauche
Un dégradé qui commence en haut à gauche

Indiquer jusqu'où va le dégradé

Nouveauté avec les dégradés radiaux, vous pouvez aussi indiquer jusqu'où se déroule l'effet de dégradé. Il faut rajouter un premier terme au tout début :

  • closest-corner  : vers le coin le plus proche

  • closest-side  : vers le côté le plus proche

  • farthest-corner  : vers le coin le plus éloigné

  • farthest-side  : vers le côté le plus éloigné

div
{
    background-image: radial-gradient(closest-side ellipse at center, white, green);
}
Un dégradé radial en closest-side
Un dégradé radial en closest-side
Un dégradé radial en closest-corner
Un dégradé radial en closest-corner

Les dégradés répétitifs

Il existe une autre technique qui permet d'avoir des dégradés qui se répètent. Pour cela, on peut utiliser les valeurs suivantes :

  • repeating-linear-gradient  : un dégradé linéaire qui se répète

  • repeating-radial-gradient  : un dégradé radial qui se répète

En fait, il suffit d'ajouter "repeating" au début et le tour est joué ? Fastoche. :-° 

Presque. Pour que le dégradé fonctionne, encore faut-il qu'il n'occupe pas tout l'espace de base. Et pour ça, vous allez devoir utiliser la technique que nous avons vue plus haut : limiter l'espace occupé par les couleurs.

Commençons par un exemple simple, un dégradé linéaire sans indication de direction (il ira donc vers le bas) :

div
{
    background-image: repeating-linear-gradient(white, green 100px);
}

C'est un dégradé linéaire qui se répète, qui va du blanc vers le vert, et le vert s'arrête au bout de 100 pixels.

Voici ce que ce dégradé répétitif affichera :

Un dégradé répétitif avec repeating-linear-gradient
Un dégradé répétitif avec repeating-linear-gradient

Mais complexifions un peu, parce que je vois que vous devenez un peu trop vite des pros des dégradés ! Que diriez-vous d'un dégradé orienté vers la droite avec de multiples couleurs ? Si on revient à la fin sur la couleur de début, ça permet d'avoir des transitions souples plutôt que des "cassures" comme sur l'exemple précédent.

div
{
    background-image: repeating-linear-gradient(to right, green, red, blue, green 200px);
}
Dégradé linéaire répétitif avec plusieurs couleurs !
Dégradé linéaire répétitif avec plusieurs couleurs !

Bon, morale de l'histoire, il faut pas me mettre entre les mains des outils comme ça sinon je suis capable de donner la nausée à n'importe qui avec mes essais. :-°

Allez, un dernier pour la route ! Je vous propose un dégradé elliptique répétitif :

div
{
    background: repeating-radial-gradient(farthest-side ellipse at center, green, red, green 80px);
}
Un dégradé radial elliptique répétitif ! Vous n'avez toujours pas la nausée ?
Un dégradé radial elliptique répétitif ! Vous n'avez toujours pas la nausée ?

Eh, j'ai fait des vagues sans le faire exprès ! Hum, en fait, jé crois qué jé souis oune artiste. :magicien:

Exemple de certificat de réussite
Exemple de certificat de réussite