Générateur de dégradé CSS
Construisez un dégradé à l'œil et copiez le CSS.
Faites glisser une poignée pour déplacer un point, ou cliquez sur la barre pour en ajouter un. Les poignées se déplacent aussi avec les flèches.
Points de couleur
- %
- %
- %
Fonctionne dans votre navigateur. Rien de ce que vous tapez n'est envoyé nulle part.
- Glissez pour placer les points
- Linéaire, radial et conique
- 8 préréglages prêts à l'emploi
Comment créer un dégradé CSS
- Choisissez un préréglage, ou réglez la couleur de chaque point.
- Faites glisser les poignées sur la barre, et cliquez sur la barre pour ajouter un point.
- Copiez le CSS et collez-le dans votre feuille de style.
Les types de dégradé comparés
| Type | Comment il se répand | Fonction CSS |
|---|---|---|
| Linéaire | Le long d'une ligne droite selon un angle | linear-gradient() |
| Radial | Vers l'extérieur depuis un point central | radial-gradient() |
| Conique | Autour d'un point central, comme une roue chromatique | conic-gradient() |
Compatibilité navigateur par type de dégradé
| Type de dégradé | Nécessite au moins |
|---|---|
| Linéaire et radial | Tous les navigateurs actuels, jusqu'à IE10 avec un préfixe |
| Conique | Chrome 69, Firefox 83, Safari 12.1 |
Le CSS fourni par cette page commence toujours par une ligne background-color unie, donc un navigateur qui ne sait pas dessiner le dégradé affiche quand même la couleur du premier point au lieu d'une boîte vide.
Conseils pour des dégradés plus doux
- Ajoutez un troisième point au milieu pour que le dégradé se lise comme deux couleurs se mélangeant à travers une troisième, plutôt qu'un simple fondu à deux tons.
- Pour une transition nette plutôt qu'un mélange, donnez la même position à deux points voisins.
- 0deg va du bas vers le haut et 90deg de gauche à droite. Ajoutez 180 à n'importe quel angle pour inverser la direction d'un dégradé sans retaper chaque point.
- Adaptez la forme radiale à la boîte : cercle pour les éléments carrés, ellipse pour les larges, pour que le dégradé ne paraisse pas étiré.
FAQ Générateur de dégradé CSS
Comment créer un dégradé en CSS ?
Réglez la propriété background sur une fonction de dégradé, comme background: linear-gradient(90deg, #ff7e5f, #feb47b). La première valeur est la direction, puis viennent les couleurs, chacune avec une position facultative.
Quelle est la différence entre dégradé linéaire, radial et conique ?
Un dégradé linéaire change de couleur le long d'une ligne droite, un dégradé radial se répand depuis un point central, et un dégradé conique balaie autour d'un point central comme une roue chromatique ou un camembert.
Dans quel sens pointe l'angle ?
0deg va du bas vers le haut, 90deg de gauche à droite, 180deg du haut vers le bas et 270deg de droite à gauche. Pour les dégradés coniques, l'angle définit où commence le balayage.
Comment obtenir une ligne nette entre deux couleurs ?
Donnez la même position à deux points voisins, comme rouge à 50 % et bleu à 50 %. La couleur bascule alors à ce point au lieu de se mélanger.
Les dégradés CSS fonctionnent-ils dans tous les navigateurs ?
Les dégradés linéaires et radiaux fonctionnent dans tous les navigateurs actuels. Les dégradés coniques ont besoin de Chrome 69, Firefox 83 ou Safari 12.1 et plus récents. Le CSS ici commence par une couleur unie de repli.
Puis-je animer un dégradé CSS ?
Vous pouvez animer background-position ou background-size sur un dégradé surdimensionné pour un effet de mouvement. Animer les couleurs des points eux-mêmes demande la règle CSS @property ou un petit script, car les navigateurs ne peuvent pas interpoler seuls entre deux dégradés complets.
Un dégradé peut-il servir de couleur de texte ?
Oui. Copiez le CSS du dégradé ici dans un background, puis ajoutez background-clip: text et color: transparent à l'élément de texte pour que le dégradé apparaisse à travers les lettres au lieu de remplir une boîte.