Les dégradés CSS

Chris Coyier a mis à jour ses articles d'introduction aux dégradés CSS, linéaires, radiaux, répétés, une bonne occasion de réviser ses classiques en compagnie d'un guide toujours clair et concis.

Par

En CSS, vous pouvez choisir de déclarer le background d'un élément comme une couleur solide, ou comme un dégradé. L'utilisation de dégradés CSS à la place d'images est préférable en termes de contrôle et de performance.

Qu'est-ce qu'un dégradé ? Typiquement, c'est le passage d'une couleur vers une autre, mais avec CSS vous pouvez contrôler exactement la façon dont ça se passe, depuis la direction jusqu'aux couleurs (aussi nombreuses que vous désirez) et jusqu'à l'endroit où vous voulez que ça se produise. Voyons ça en détail.

Les dégradés comme background-image

En CSS, la déclaration d'une couleur solide se fait en utilisant la propriété background-color, mais pour les dégradés on utilise background-image. C'est pratique, comme nous allons le voir tout à l'heure. Le raccourci background saura ce que vous voulez dire si vous déclarez l'un ou l'autre.

//CSS

.gradient {

  /* pour une éventuelle solution de rechange */
background-color: red;

/* sera "au-dessus", si le navigateur est compatible */
background-image: linear-gradient(red, orange);

/* remet à zéro les autres propriétés, comme background-position, mais le navigateur ne sait pas ce que vous voulez */
background: red;
background: linear-gradient(red, orange);

  }

Dégradés linéaires

Le type de dégradés le plus courant et le plus utile est linear-gradient(). L'axe du dégradé peut être de gauche à droite, du haut vers le bas ou selon un angle que vous choisissez.

Si vous ne déclarez rien, la direction sera par défaut de haut en bas :

dégradé de haut en bas

Les couleurs sont séparées par une virgule et peuvent être de tous les types que vous utilisez habituellement : hexadécimales, couleurs nommées, rgba, hsla, etc.

Pour rendre votre dégradé horizontal, vous devez passer un paramètre supplémentaire commençant par le mot "to" (vers) qui indique la direction :

//CSS

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

Résultat :
dégradé de gauche à droite

Cette syntaxe "to" fonctionne aussi pour les coins. Par exemple si vous voulez que l'axe du dégradé commence au coin inférieur gauche pour aller au coin supérieur droit, vous pouvez indiquer "to top right" :

.gradient {
  background-image:
    linear-gradient(
      to top right, 
      red, #f06d06
    );
  }

Résultat :
dégradé du coin inférieur gauche au coin supérieur droit

Si cette boîte était carrée, l'angle du dégradé serait de 45°, mais ce n'est pas le cas ici. Si vous voulez être sûr que l'angle soit de 45°, vous pouvez déclarer :

//CSS

.gradient {
  background-image:
    linear-gradient(
      45deg, 
      red, #f06d06
    );
  }

Vous n'êtes pas non plus limités à deux couleurs. En fait, vous pouvez intégrer autant de couleurs que vous le souhaitez, séparées par des virgules. En voici quatre :

//CSS

.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, 
      #f06d06, 
      rgb(255, 255, 0), 
      green
    );
}

Résultat :
dégradé avec stops multiples

Vous pouvez également déclarer l'endroit où vous voulez qu'une couleur s'arrête. C'est ce qu'on appelle le color-stop. Si par exemple vous voulez que le jaune occupe l'essentiel de l'espace et le rouge une toute petite partie au début, vous pouvez déclarer un color-stop assez tôt :

//CSS

.gradient {
  height: 100px;
  background-color: red;
  background-image:
    linear-gradient(
      to right,
      red,
      yellow 10%
    );
}

Résultat :
dégradé avec très peu de rouge et très peu de dégradé, tout se passe dans les 10% initiaux, le reste est du jaune pur

Quand on parle de dégradés on pense à des couleurs qui se mélangent graduellement mais si vous utilisez deux color-stop identiques, vous passez instantanément d'une couleur à l'autre, ce qui peut être utile pour créer des background qui simulent des colonnes.

//CSS

.columns-bg {
  background-image:
    linear-gradient(
      to right, 
      #fffdc2,
      #fffdc2 15%,
      #d7f0a2 15%,
      #d7f0a2 85%,
      #fffdc2 85%
    );
}

Résultat :
3 colonnes

Compatibilité navigateurs / préfixes
Jusqu'à présent, nous n'avons vu que la nouvelle syntaxe, mais les dégradés CSS existent depuis un bon bout de temps. La compatibilité navigateurs est bonne, là où ça devient complexe, c'est au niveau de la syntaxe et des préfixes. Il y a trois syntaxes différentes, qu'on peut voir ainsi :

  1. Ancienne : la syntaxe originale, Webkit, avec des choses du genre from() et color-stop().
  2. Intermédiaire : nouveautés du genre "left".
  3. Nouvelle : nouveau changement avec "to right".

Et bien sûr les préfixes.

Essayons de mettre tout ça dans un tableau :

CHROME      1-9: Ancienne, préfixée
            10-25: Intermédiaire, préfixée
            26: Nouvelle, non préfixée
SAFARI      3-: Incompatible
            4-5.0: Ancienne, préfixée
            5.1-6.0: Intermédiaire, préfixée
            6.1: Nouvelle, non préfixée
FIREFOX     3.5-: Incompatible
            3.6-15: Intermédiaire, préfixée
            16: Nouvelle, non préfixée
OPERA       11.0-: Incompatible
            11.1-11.5: Intermédiaire, préfixée, linéaire seulement
            11.6-12: Intermédiaire, préfixée, radial ajouté
            12.1: Intermédiaire, non préfixée
            15: Nouvelle, non préfixée
IE          8-: Incompatible
            9: filtres seulement
            10+: Nouvelle, non préfixée (+ Intermédiaire, préfixée)
ANDROID     2.0-: Incompatible
            2.1-3.0: Intermédiaire, préfixée
            4.0-4.3: Nouvelle, préfixée
            4.4+: Nouvelle, non préfixée
iOS  3-:    Incompatible
            3.2-4.3: Intermédiaire, préfixée
            5.0-6.1: Nouvelle, préfixée
            7.0: Nouvelle, non préfixée

Il y a des tuilages, par exemple lorsqu'un navigateur supporte la nouvelle syntaxe, il supportera probablement les syntaxes anciennes, avec préfixe. Quoi qu'il en soit, la meilleure pratique reste : Si votre navigateur est compatible avec la nouvelle syntaxe, utilisez la.

Si vous vouliez avoir la compatibilité support la plus parfaite, un dégradé linéaire pourrait ressembler à ceci :

//CSS

.gradient {

  /* Fallback (ou bien .jpg/.png) */
  background-color: red;

  /* SVG fallback pour IE 9 (avec data URI, ou avec filtre) */
  background-image: url(fallback-gradient.svg); 

  /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
  background-image:
    -webkit-gradient(linear, left top, right top, from(red), to(#f06d06));

  /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
  background-image:
    -webkit-linear-gradient(left, red, #f06d06);

  /* Firefox 3.6 - 15 */
  background-image:
    -moz-linear-gradient(left, red, #f06d06);

  /* Opera 11.1 - 12 */
  background-image:
    -o-linear-gradient(left, red, #f06d06);

  /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image:
    linear-gradient(to right, red, #f06d06);

}

Ça en fait du code ! Écrire tout ça à la main serait source d'erreurs et très ennuyeux. Autoprefixer s'en occupera très bien. Le mixin Compass peut s'occuper des data URI SVG pour IE 9, si c'est important pour vous.

Filtres IE
Internet Explorer (IE) dans ses versions 6 à 9 n'est pas compatible avec la syntaxe CSS des dégradés, mais il offre une façon programmatique de créer des dégradés :

//CSS

/* "Invalide", mais fonctionne avec 6-8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);

/* Valide, fonctionne pour 8-9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

Avant de décider éventuellement d'utiliser cette syntaxe, quelques considérations nécessaires :

  1. filter est mauvais en termes de performance,
  2. background-image est prioritaire sur filter, autrement dit si vous l'utilisez pour un fallback (solution de rechange), le filtre ne fonctionnera pas. Par contre, si une couleur solide peut faire l'affaire en tant que fallback (donc avec background-color), le filtre fonctionnera.

Les filtres ne fonctionnent qu'avec des valeurs hexadécimales, cependant vous pouvez ajouter une transparence en positionnant la quantité de transparence avant la valeur hexadécimale. Cette quantité va de 00(0%) à FF(100%). Par exemple :

rgba(92,47,90,1) correspond à #FF5C2F5A
rgba(92,47,90,0) correspond à #005C2F5A

Dégradés radiaux

À la différence des dégradés linéaires qui vont d'un point à un autre sur une ligne, les dégradés radiaux irradient à partir d'un point. Ils sont souvent utilisés pour simuler une lumière.

Par défaut, la première couleur part du centre (center center) de l'élément et se dégrade progressivement vers les contours. Le dégradé est réparti de manière égale dans toutes les directions.

//CSS

.gradient {
  background-image:
    radial-gradient(
      yellow,
      #f06d06
    );
}

Résultat :

irradiation depuis le centre, en forme d'ellipse

Vous voyez comment ce dégradé prend par défaut une forme d'ellipse, du fait que l'élément contenant n'est pas un carré. Si nous voulons un cercle, nous pouvons le déclarer ainsi :

//CSS

.gradient {
  background-image:
    radial-gradient(
      circle,
      yellow,
      #f06d06
    );
}

Notez qu'avec cette déclaration le dégradé est circulaire et que le dégradé va par défaut jusqu'au côté le plus éloigné. Si nous voulons que le cercle soit entièrement compris dans notre élément, nous pourrions nous en assurer en spécifiant que le dégradé doit s'arrêter au côté le plus proche ("closest-side") :

//CSS

.gradient {
  background-image:
    radial-gradient(
      circle closest-side,
      yellow,
      #f06d06
    );
}

Résultat :
irradiation circulaire depuis le centre, comprise intégralement dans les limites du plus petit côté

Les valeurs possibles sont closest-corner(coin le plus proche), closest-side (côté le plus proche), farthest-corner (coin le plus éloigné) et farthest-side (côté le plus éloigné). En pratique, on peut se dire : "je veux que ce dégradé radial s'étende depuis le point central jusqu'à ...... , et qu'il se dégrade partout entre les deux, de la façon que j'indique".

Un dégradé radial ne part pas nécessairement du centre, vous pouvez spécifier un point de départ en utilisant "at ..." avec le premier paramètre :

//CSS

.gradient {
  background-image:
    radial-gradient(
      circle at top right,
      yellow,
      #f06d06
    );
}

Pour que ce soit plus évident, j'ai fait un carré et ajouté un color-stop :

irradiation depuis le coin supérieur droit

Compatibilité navigateurs
C'est à peu près la même que pour les dégradés linéaires, à l'exception d'une très vieille version d'Opera. Mais tout comme pour les dégradés linéaires, la syntaxe a connu des changements. Là encore, il y a l'ancienne, l'intermédiaire et la nouvelle :

//CSS

/* Exemple d'ancienne */
background-image: 
  -webkit-gradient(radial, center center, 0, center center, 141, from(black), to(white), color-stop(25%, blue), color-stop(40%, green), color-stop(60%, red), color-stop(80%, purple));

/* Exemple d'intermédiaire */
background-image: 
  -webkit-radial-gradient(45px 45px, farthest-corner, #F00 0%, #00F 100%) repeat scroll 0% 0% rgba(0, 0, 0, 0);

/* Exemple de nouvelle */
background-image: 
  radial-gradient(circle farthest-side at right, #00F, #FFF);

Les caractéristiques à retenir étant :

  • Ancienne : préfixée avec Webkit, comporte des choses comme from() et color-stop().
  • Intermédiaire : le premier paramètre était la localisation du centre. Attention, ça ne fonctionne plus du tout avec les navigateurs qui supportent la nouvelle syntaxe non préfixée, donc si utilisez cette syntaxe intermédiaire elle doit absolument être préfixée.
  • Nouvelle : le premier paramètre peut être "verbeux", genre "circle closest-corner at top right".

Là encore, je laisserais Autoprefixer s'en occuper. Vous écrivez avec la syntaxe nouvelle, il se charge des fallbacks. Les dégradés radiaux sont un peu plus compliqués que les linéaires, donc ma recommendation est de bien s'habituer à la nouvelle syntaxe et de n'utiliser qu'elle.

Dégradés répétés

Les "repeating gradients" sont légèrement moins compatibles. Ils existent en versions linéaires et radiales.

Avec les dégradés non-répétés, il existe une astuce pour créer un dégradé de manière à répéter un motif. Pour cela on crée un petit rectangle qu'on aligne avec d'autres petits rectangles en utilisant background-size.

Pas besoin de cette astuce avec les dégradés répétés. La taille du dégradé est déterminée par le color-stop final. Si c'est 20px, la taille du dégradé (qui se répètera ensuite) est un carré de 20px de côté.

//CSS

.repeat {
  background-image: 
    repeating-linear-gradient(
      45deg,
      yellow,
      yellow 10px,
      red 10px,
      red 20px /* determines size */
    );
}

Résultat :

motif répété diagonal, lignes jaunes et rouges

Même chose avec les dégradés radiaux :

//CSS

.repeat {
  background: 
    repeating-radial-gradient(
      circle at 0 0, 
      #eee,
      #ccc 50px
    );
}

Résultat :

motif répété irradié depuis le coin supérieur gauche, répétition du même dégradé


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS parus dans la Cascade.

Tous les articles sur les bases de CSS parus dans la Cascade.

Autres articles sur les dégradés dans la Cascade.


Ressources complémentaires en anglais

Ressources complémentaires en français

Outils

  • CSS Gradient Generator , comme son nom l’indique, un outil en ligne pour s’amuser avec les dégradés et comprendre comment ça marche.
  • Blend, un autre outil intuitif pour générer facilement des dégradés CSS

original paru le dans CSS-Tricks.

Sur l'auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.

Traduit avec l'aimable autorisation de CSS-Tricks et de l'auteur.
Copyright CSS-Tricks © 2014.