Linear-gradient

La propriété background-image accepte la fonction linear-gradient(). Comme son nom l'indique, celle-ci permet de définir un dégradé. Pour générer un dégradé, il faut minimalement attribuer deux couleurs en paramètre à la fonction.

Par exemple, pour définir un dégradé de vert à bleu:

background-image: linear-gradient(#00c774, #3c38ba); Orientation

Par défaut, les dégradés sont verticaux. Cependant, il est possible de spécifier une direction particulière en le spécifiant dans le premier paramètre de la fonction linear-gradient().

Le plus simple est d'utiliser en début de fonction des mots-clés indiquant la direction.

Par exemple:

  • to top
  • to right
  • to bottom (par défaut)
  • to left

Pour créer des dégradés diagonaux, il est possible de spécifier une deuxième direction dans le mot-clé.

Par exemple:

  • to top left
  • to top right
  • to bottom left
  • to bottom right
Degrés

Il est aussi possible de spécifier une rotation en termes de degrés pour plus de précision.

Par exemple:

background-image: linear-gradient(90deg, #00c774, #3c38ba);

Serait l'équivalent de to right. Donc il serait possible de spécifier au degré prêt l'axe du dégradé souhaité.

Points d'arrêt

Par défaut, lorsqu'aucun point d'arrêt n'est spécifié, les couleurs sont distribuées de façon égale.

Par exemple un dégradé à trois couleurs, sans point d'arrêt, donc égales, génère de 0 à 50% une fusion du vert vers le bleu et de 50% à 100% une fusion de bleu vert le rouge.

background: linear-gradient(to right, #00c774, #3c38ba, #ff8487);

Il est cependant possible de définir un point d'arrêt après une couleur afin de spécifier à partir de quel point cette couleur doit commencer à fusionner avec la suivante.

Par exemple, pour contrôler la distribution du vert:

linear-gradient() linear-gradient()
OUTIL uiGradients Collection de dégradés prêts à être utilisés.
OUTIL CSS Gradient Générateur de dégradés.
EXERCICE Linear-gradient - Igloofest Pour cet exercice, vous devez compléter la mise en page d’un carton promotionnel de l’Igloofest.
Make Beautiful Gradients est un excellent billet de Josh W Comeau expliquant comme créer de superbes dégradés CSS.