Dégradé CSS

Arrière-plan de dégradé

Les dégradés CSS vous permettent de visualiser une transition en douceur entre deux ou plusieurs couleurs spécifiées.

CSS définit deux types de dégradés :

  • Dégradé linéaire(vers le bas/vers le haut/vers la gauche/vers la droite/diagonale)
  • Dégradé radial(défini par son centre)

Dégradé linéaire CSS

Pour créer un dégradé linéaire, vous devez définir au moins deux repères de couleur. Les repères de couleur sont les couleurs que vous souhaitez présenter avec 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é.

grammaire

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Dégradé linéaire - du haut vers le bas (par défaut)

L'exemple suivant montre un dégradé linéaire qui commence du haut. Il commence par le rouge et passe au jaune :

de haut en bas (par défaut)}

Exemple

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

Essayez-le vous-même

Dégradé linéaire - De gauche à droite

L'exemple suivant montre un dégradé linéaire qui commence par la gauche. Il commence par le rouge et se dégrade en jaune :

de gauche à droite

Exemple

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

Essayez-le vous-même

Dégradé linéaire - Diagonal

Vous pouvez réaliser un dégradé diagonal en spécifiant des positions de départ horizontales et verticales.

L'exemple suivant montre un dégradé linéaire qui commence en haut à gauche (et va vers le bas à droite). Il commence par le rouge et se dégrade en jaune :

de haut en bas à droite

Exemple

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

Essayez-le vous-même

Utilisation de l'angle

Si vous souhaitez avoir plus de contrôle sur l'angle du dégradé, vous pouvez définir un angle pour remplacer les directions prédéfinies (en bas, en haut, à droite, à gauche, en bas à droite, etc.). La valeur 0deg est égale à en haut (to top). La valeur 90deg est égale à à droite (to right). La valeur 180deg est égale à en bas (to bottom).

180deg

grammaire

background-image: linear-gradient(angle, color-stop1, color-stop2);

cet angle spécifie l'angle entre la ligne horizontale et la ligne de dégradé.

L'exemple suivant montre comment utiliser un angle dans un dégradé linéaire :

Exemple

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

Essayez-le vous-même

Utilisation de plusieurs couleurs

L'exemple suivant montre un dégradé linéaire avec plusieurs couleurs (du haut vers le bas) :

Exemple

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

Essayez-le vous-même

L'exemple suivant montre comment utiliser des couleurs arc-en-ciel et du texte pour créer un dégradé linéaire (de gauche à droite) :

Arrière-plan de dégradé

Exemple

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

Essayez-le vous-même

Utilisation de la transparence

Les dégradés CSS supportent également la transparence et peuvent être utilisés pour créer des effets de dégradé.

Pour ajouter la transparence, nous utilisons la fonction rgba() pour définir les couleurs. Le dernier paramètre de la fonction rgba() peut être une valeur comprise entre 0 et 1, définissant la transparence de la couleur : 0 signifie transparent, 1 signifie pleine couleur (sans transparence).

L'exemple suivant montre une gradation linéaire commençant par la gauche. Elle commence tout à fait transparente, puis passe progressivement à la couleur rouge :

Exemple

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

Essayez-le vous-même

Gradation linéaire répétée

repeating-linear-gradient() La fonction est utilisée pour la gradation linéaire répétée :

Exemple

Gradation linéaire répétée :

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Essayez-le vous-même