Générateur de dégradés CSS

Les trois types de dégradé

• linear-gradient() : les couleurs avancent en ligne droite. L'angle donne la direction : 180deg va de haut en bas (valeur par défaut) et 90deg de gauche à droite.
• radial-gradient() : les couleurs partent d'un point vers l'extérieur, en cercle ou en ellipse. Pratique pour les halos et les vignettages.
• conic-gradient() : les couleurs tournent autour d'un centre, comme une roue. Utile pour les camemberts, les roues chromatiques et les fonds à effet métallique.

Arrêts de couleur

Chaque arrêt est une couleur et une position : #2563eb 0%, #db2777 100%. Si deux arrêts partagent la même position, la transition est nette au lieu d'être progressive : c'est ainsi qu'on fait des rayures.

background: linear-gradient(90deg, #2563eb 50%, #db2777 50%);

Un dégradé sur une image

Pour qu'un titre reste lisible sur une photo, placez devant un dégradé du noir transparent au noir semi-opaque. En CSS, les couches de background se séparent par des virgules et la première passe au-dessus :

.hero {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 100%),
    url("photo.jpg") center / cover;
}

Pour monter la maquette avant d'avoir la photo, une image ximg.es suffit : url("https://ximg.es/random/1600x900?seed=hero").

Conseils

• Entre deux couleurs très différentes (bleu et jaune, par exemple), le milieu peut devenir grisâtre. Ajoutez un arrêt intermédiaire ou interpolez dans un autre espace colorimétrique : linear-gradient(in oklch 90deg, …), pris en charge par les navigateurs actuels.
• Pour un dégradé sur du texte, associez background-clip: text et color: transparent.
• Les variantes repeating-linear-gradient() et consorts répètent le motif : parfaites pour des rayures et des grilles sans images.