Générateur de dégradés CSS

Comment créer un dégradé CSS

1. Choisissez un type : le linéaire suit une ligne droite selon l’angle choisi, le radial s’étend en cercle depuis le centre et le conique tourne autour du centre à partir de l’angle choisi.
2. Changez chaque couleur et faites glisser son curseur pour la placer entre 0 % et 100 %. Ajouter une couleur en place une nouvelle dans le plus grand écart, jusqu’à six ; ✕ en retire une.
3. Ou appuyez sur un modèle pour partir de lui. L’aperçu change aussitôt ; Copier le CSS copie les lignes à coller dans votre feuille de style.

Questions fréquentes

Pourquoi y a-t-il deux lignes background ?

La première est une couleur unie pour le rare navigateur incapable d’afficher les dégradés ; la seconde la remplace partout ailleurs.

Que signifie l’angle ?

Pour un dégradé linéaire, 0deg va du bas vers le haut, 90deg de gauche à droite et 180deg du haut vers le bas. Pour un dégradé conique, c’est l’endroit où commence la première couleur, en tournant dans le sens horaire depuis le haut.

Puis-je utiliser le dégradé sur du texte ou une bordure ?

Oui. Pour du texte, mettez-le en fond et ajoutez background-clip: text et color: transparent. Pour une bordure, utilisez-le dans border-image avec border-image-slice: 1.