Tutoriel dégradé de couleurs CSS
À la place de donner juste une couleur aux textes et aux fonds, avec CSS il est aussi possible de créer des dégradé de couleurs avec la proprieté background-image
Types de dégradé
En CSS il est possible de créer deux types de dégradé de couleurs:
Le premier type se fait avec la fonction linear-gradient(color1, color2, ...)
Voici une exemple du code et son résultat:
.gradient {
background-image: linear-gradient(blue, yellow);
}
En revanche, dans l'exemple qui suive on peut voir le deuxième type de dégradé avec la fonctin radial-gradient(color1, color2, ...):
.gradient {
background-image: radial-gradient(blue, yellow);
}
Les dégradés lineaires - Direction
Il y a plusieures choses qu'on peut faire avec les dégradés, par default les dégradés sont visualisés de haut en bas, mais il est possible aussi changer la direction. Par exemple si on veut créer une dégradé qui vait de droite à gauche on peut peut écrire comme l'exemple qui suive:
.gradient {
background-image: linear-gradient(to left, blue, yellow);
}
il est même possible de faire cela en diagonal:
.gradient {
background-image: linear-gradient(to bottom right, blue, yellow);
}
ou utiliser un angle précis:
.gradient {
background-image: linear-gradient(60deg, blue, yellow);
}
Couleurs Multiples
Avec les dégradés on n'est pas obligé à se limiter que à deux couleurs, en réalité on peut en insérer un nombre indéfini, comme dans les exemples qui suivent:
.gradient {
background-image: linear-gradient(to right, red, orange, yellow, green, blue, purple);
}
.gradient {
background-image: radial-gradient(red, orange, yellow, green, blue, purple);
}
Créer un texte avec les gradients
Jusqu'à maintenant on s'est juste limités à créer des fonds avec les gradients, mais il est possible aussi faire cela avec le texte. Le code qui suit montre comment cela est possible:
.grad_text{
background-color: red;
background-image: linear-gradient(to right, red, green, blue, yellow) ;
background-clip: text;
color: transparent;
}
background-color n'est pas obligatoire, mais fortement conseillée parce que certaines vieilles vérsions des browsers ne supportent pas les dégradés et il faut utiliser une couleur pour remplacer cela.
SAMPLE TEXT