8.3 Dégradés CSS

• linear (linéaire) : les couleurs vont d’un point à un autre, en ligne droite
• radials (radiaux): les couleurs vont du centre du cercle à ses bords, dans toutes les directions

Un dégradé est considéré comme une image d’arrière-plan et doit être utilisé avec la propriété correspondante.

linear-gradient – dégradé linéaire

La syntaxe pour les dégradés linéaires est assez complexe, mais l’idée de base est de définir :

• quelles couleurs vous voulez
• où ces couleurs doivent apparaître le long de l’axe (au début, au milieu, à la fin, etc.)
• dans quelle direction doit aller le gradient

Commençons par un simple dégradé de 2 couleurs :

div { background-image: linear-gradient(red, blue);}

<div>A simple vertical background gradient</div>

Par défaut :

• la direction est verticale, de haut en bas – top to bottom
• la première couleur est au début (top)
• la deuxième couleur est à la fin (bottom)

Changer de direction

Si la direction du haut vers le bas ne vous convient pas, vous pouvez la modifier soit :

• définir la direction du dégradé, avec des mots clés comme to left top
• définir un angle spécifique en degrés comme 45 deg

Cette direction doit être définie avant les couleurs :

div { background-image: linear-gradient(to bottom right, yellow, purple); width: 200px;}

<div>A diagonal gradient from the top left corner to the bottom right one</div>

Si vous voulez un angle plus spécifique, vous pouvez utiliser une valeur en degrés :

• 0deg est la valeur par défaut, de haut en bas
• 20deg est légèrement diagonal, va dans le sens des aiguilles d’une montre
• 90deg est comme 15 heures, de droite à gauche
• 180deg est de bas en haut

div { background-image: linear-gradient(20deg, green, blue); width: 150px;}

<div>A diagonal gradient with an angle of 20 degrees</div>

Ajout de plus de couleurs

Vous pouvez insérer autant de couleurs que vous le souhaitez. Ils seront également répartis le long de l’axe :

• 2 couleurs : 0% et 100%
• 3 couleurs : 0%, 50% et 100%
• 4 couleurs : 0%, 33%, 67% et 100%

div{ background-image: linear-gradient(orange, grey, yellow); width: 150px;}

<div>A rather ugly gradient, but you get the idea</div>

Définition de couleurs spécifiques

Si vous ne voulez pas que les couleurs soient distribuées de manière égale, vous pouvez définir des positions d’arrêt de couleur spécifiques, en utilisant des pourcentages % ou des pixels px :

div { background-image: linear-gradient(orange, grey 10%, yellow 50%); width: 150px;}

<div>An even uglier gradient, but you get the idea</div>

Dans cette configuration :

• orange n'a pas de position d'arrêt, donc zéro par défaut 0%
• grey est plus proche du sommet, à10% au lieu de50%
• yellow prend la moitié du dégradé, de50% à la fin,100%

radial-gradient – dégradé radial

Alors que les dégradés linéaires suivent un seul axe, les dégradés radiaux sont répartis dans toutes les directions. Leur syntaxe est assez semblable à celle des linéaires, car ils ont tous les deux des arrêts de couleur. Mais au lieu de spécifier une direction, vous devez spécifier :

• une forme : un cercle ou une ellipse
• un point de départ : qui sera le centre du cercle / ellipse
• un point final : où le bord du cercle / ellipse sera

div{ background-image: radial-gradient(red, yellow); padding: 1rem; width: 300px;}

<div>This looks like the sun, doesn't it?</div>

Par défaut :

• le dégradé est une ellipse
• la première couleur commence au centre
• la dernière couleur se termine au coin le plus éloigné

la position de départ

La position de départ fonctionne comme les positions de fond. Vous le définissez avec le mot clé at.

div{ background-image: radial-gradient(at top right, black, lightgrey); padding: 1rem; width: 300px;}

<div>A gloomy day.</div>

La position de fin

Par défaut, la forme se termine au coin le plus éloigné. Vous pouvez soit choisir :

• closest-side (côté le plus proche)
• closest-corner (coin le plus proche)
• farthest-side (côté le plus éloigné)
• farthest-corner (coin le plus éloigné)

La différence est difficile à comprendre et à visualiser. Je n’entrerai donc pas dans les détails. Mozilla a une bonne description des différentes valeurs.

div { background-image: radial-gradient(closest-corner at 20px 20px, green, blue); padding: 1rem; width: 300px;}
div:hover { background-image: radial-gradient(farthest-side at 20px 20px, green, blue)}

<div>Hover this green star in the sky to see it expand.</div>

taille fixe

Au lieu de définir les positions de début et de fin, vous pouvez simplement définir des dimensions spécifiques :

div{ background-image: radial-gradient(20px 10px at 75% 50%, darkviolet, pink); padding: 1rem; width: 300px;}

<div>A small violet disc in a sea of pink.</div>

Les dégradés CSS sont puissants, compte tenu de l’infini des options.

Les exemples de cette page sont volontairement « laids », avec des différences de couleur prononcées, afin de mieux expliquer le fonctionnement de chaque propriété.

Mais c’est assez facile d’écrire des dégradés de manière plus subtile, notamment pour rendre des boutons attrayants :

.button-grey{ background-image: linear-gradient(#f2f2f2, #f2f2f2);}
.button-yellow { background-image: linear-gradient(#fce374, #fcdf5b);}
.button-orange { background-image: linear-gradient(#f58a38, #f57c20);}
.button-red { background-image: linear-gradient(#ed6d64, #ed574c);}
.button-purple { background-image: linear-gradient(#847bba, #7568ba);}
.button-blue { background-image: linear-gradient(#42b0e3, #2ba9e3);}
.button-green { background-image: linear-gradient(#97cc76, #8bcc62);}