Fonction CSS linear-gradient()

Définition et utilisation

CSS linear-gradient() La fonction est utilisée pour créer un dégradé linéaire en tant que fond.

Pour créer un dégradé linéaire, il faut définir au moins deux couleurs de repère. Les couleurs de repère sont les couleurs entre lesquelles vous souhaitez réaliser une transition en douceur. Vous pouvez également définir le point de départ et la direction (ou l'angle) ainsi que l'effet de dégradé.

Exemples de dégradé linéaire :

Exemple

Exemple 1

Ce dégradé linéaire commence par le haut. Il passe du rouge au jaune, puis au bleu :

#grad {
  background-image: linear-gradient(red, yellow, blue);
}

Essayez-le vous-même

Exemple 2

Un dégradé linéaire commençant à gauche. Il passe du rouge au bleu :

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

Essayez-le vous-même

Exemple 3

Un dégradé linéaire commençant en haut à gauche (et s'étendant en bas à droite) :

#grad {
  background-image: linear-gradient(to bottom right, red , blue);
}

Essayez-le vous-même

Exemple 4

Un dégradé linéaire spécifiant un angle :

#grad {
  background-image: linear-gradient(180deg, red, blue);
}

Essayez-le vous-même

Exemple 5

Une dégradé linéaire contenant plusieurs couleurs de repère :

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

Essayez-le vous-même

Exemple 6

Un dégradé linéaire avec deux légendes de couleur :

#grad {
  background: linear-gradient(
    to right,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

Essayez-le vous-même

Exemple 7

Un dégradé linéaire avec transparence :

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Essayez-le vous-même

Syntaxe CSS

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

Détails techniques

Prise en charge du navigateur

Les numéros dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Pages associées

Tutoriel :Dégradé CSS

Référence :Propriété background-image CSS

Référence :Fonction CSS conic-gradient()

Référence :Fonction CSS radial-gradient()

Référence :Fonction CSS repeating-conic-gradient()

Référence :Fonction CSS repeating-linear-gradient()

Référence :Fonction CSS repeating-radial-gradient()