Générateur de dégradé CSS
Des couleurs d’un côté, une déclaration de l’autre.
Résultat
Collez ou saisissez du texte ci-dessus pour voir le résultat ici.
Vos fichiers restent sur votre appareil
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous collez est traité sur votre appareil et n’est jamais envoyé à un serveur : vous pouvez l’utiliser sans crainte avec des jetons, des clés et des textes non publiés.
Comment ça marche
- Une couleur par ligne. Toute couleur CSS convient — hex, rgb(), hsl(), un nom de couleur.
- Ajoutez une position après une couleur pour la fixer : « #000 80% ».
- Choisissez linéaire, radial ou conique, puis l’angle ou le centre.
- Copiez la déclaration.
Questions fréquentes
- Pourquoi une couleur unie en premier ?
- C’est le repli. Tout ce qui ne sait pas lire le dégradé — un vieux navigateur, un client de messagerie, un moteur de rendu PDF — prend la première déclaration et ignore la seconde. Sans elle, ces lecteurs n’ont aucun fond du tout.
- Vers où pointe 180deg ?
- Vers le bas. En CSS, 0deg pointe vers le haut et l’angle tourne dans le sens des aiguilles d’une montre, à l’inverse de l’ancienne syntaxe -webkit- et de la plupart des outils de conception. C’est la chose qu’on inverse le plus souvent ici.
- Pourquoi du texte plutôt qu’une zone à faire glisser ?
- Parce qu’on ne colle pas une zone de dessin dans une revue de code. La sortie ici est une déclaration : comparable, versionnable et lisible par la prochaine personne qui ouvrira le fichier.
- Quelque chose part-il vers un serveur ?
- Non. Tout tourne dans le navigateur : ce que vous collez reste sur votre ordinateur.
Outils associés
◒ Générateur de box-shadow CSS La déclaration, pas une zone à faire glisser. ◒ Convertisseur de couleur HEX, RGB, HSL et CMJN — plus le rapport de contraste qui décide de la lisibilité. ◐ Vérificateur de contraste Si quelqu’un peut vraiment le lire. ◒ Formateur CSS Une déclaration par ligne — ou tout le fichier sur une seule.