La Cascade

Rechercher

Les dégradés CSS

par Chris Coyier, 09 mars 2014, css, article original paru le 3 mars 2014 dans CSS-Tricks

Surligner les rangées d'un tableau en CSS est très facile, mais les colonnes ? Les pseudo-éléments sont mis à contribution dans ce tutoriel court, facile et astucieux de l'indispensable Chris Coyier.


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 backgrounds 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.

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é

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
Voir la liste des articles de Chris Coyier traduits dans La Cascade.
Article original paru le 3 mars 2014 dans CSS-Tricks
Traduit avec l'aimable autorisation de CSS-Tricks et de Chris Coyier.
Copyright CSS-Tricks © 2014