Linear-gradient | smnarnold

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);

CodePen | smnarnold 👀

Orientation

Mots-clé

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

CodePen | smnarnold 👀

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

CodePen | smnarnold 👀

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);

CodePen | smnarnold 👀

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:

CodePen | smnarnold 👀