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 :

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 :

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 :

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 :

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 :

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 :

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 :

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 :

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 :

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 :

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

//CSS

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

Résultat :

Ressources complémentaires en anglais

• Jouez avec ce que nous avons vu en utilisant CSS3, please!
• Can I Use pour les dégradés
• Les ressources de Mozilla sur les dégradés linéaires, linéaires répétés, radiaux et radiaux répétés.
• Une galerie de dégradés (vous pouvez construire des motifs incroyables avec les dégradés).

Ressources complémentaires en français

• Utilisation de dégradés CSS, par Mozilla
• Les dégradés de couleur en CSS3 avec gradient, par HTML5-CSS3.fr

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