Générateur de dégradés CSS
Local only — nothing is uploaded unless you save or share it.
Un générateur de dégradés CSS pour linéaire, radial et conique — le code se copie directement.
- Choisissez la sorte de dégradé, et l'angle s'il en a un
- Réglez vos couleurs — ajoutez des arrêts ou positionnez-les à la main
- Copiez le CSS
Enregistrer cet outil
Gardez Générateur de dégradés CSS sous la main
Utilisez le menu Partager de votre navigateur, puis « Sur l'écran d'accueil ».
À propos de cet outil
Un dégradé fait partie de ces choses plus rapides à construire à l'œil qu'à écrire à la main, parce que le nombre que vous voulez est rarement celui que vous devinez en premier. Ici, le résultat s'affiche à mesure que vous le modifiez et le CSS vous est remis en dessous. Les trois sortes sont là : le linéaire pour le fondu habituel de gauche à droite ou de haut en bas, le radial pour une lueur qui s'étend depuis le milieu, et le conique pour le balayage autour d'un point dont sont faites les roues chromatiques et les camemberts. Vous pouvez ajouter autant d'arrêts de couleur que vous voulez et positionner chacun d'eux, ou laisser les positions vides et laisser le navigateur les espacer régulièrement, ce qui est presque toujours ce qu'il faut et garde la valeur assez courte pour être modifiée ensuite. Le mode répété transforme n'importe lequel d'entre eux en motif qui se répète : c'est ainsi qu'on fait des rayures en CSS sans la moindre image. Chaque couleur que vous tapez est analysée puis réécrite plutôt que recopiée telle quelle, si bien que la valeur qui atterrit dans votre presse-papiers est une couleur et rien d'autre. L'outil fonctionne entièrement dans votre navigateur.
Questions fréquentes
Quelle est la différence entre linéaire, radial et conique ?
Le linéaire fond le long d'une ligne droite, c'est celui auquel pensent la plupart des gens. Le radial s'étend vers l'extérieur depuis un point, comme une lueur. Le conique balaie autour d'un point au lieu de s'en éloigner, et c'est ce qui rend possibles les roues chromatiques et les parts de camembert en CSS pur.
Faut-il définir la position des arrêts ?
En général non. Laissées vides, le navigateur espace les arrêts régulièrement, ce qui convient la plupart du temps et garde le CSS court et facile à modifier plus tard. Définissez-les à la main quand vous voulez qu'une couleur tienne plus longtemps, ou qu'il y ait une frontière nette entre deux d'entre elles.
Comment faire une rayure nette plutôt qu'un fondu ?
Donnez la même position à deux arrêts. Un dégradé allant d'une couleur à 50 pour cent à une autre également à 50 pour cent change d'un coup au lieu de se mélanger. Combinez cela au mode répété et vous obtenez des rayures sans le moindre fichier image.
Pourquoi ma couleur est-elle revenue en code hexadécimal ?
Chaque couleur est analysée puis réécrite plutôt que transmise telle quelle. Cela garantit que la sortie est une couleur valide et rien d'autre, ce qui compte puisque la valeur finit dans une feuille de style. Une couleur incompréhensible est refusée plutôt qu'incluse en silence.
Les dégradés fonctionnent-ils dans tous les navigateurs ?
Le linéaire et le radial fonctionnent partout depuis de nombreuses années. Le conique est plus récent mais pris en charge par tous les navigateurs actuels. S'il vous faut supporter quelque chose de très ancien, le générateur affiche aussi une couleur unie que vous pouvez déclarer avant, en repli.
Aidez-nous à améliorer cet outil
Un bug, une envie de changement, ou un outil qui vous manque ?
Vous avez un message non envoyé.
Merci — c'est bien arrivé. La réponse vous attendra dans votre boîte.Go to my messages