Comprendre le résultat
Une palette, des positions et un format
Une belle transition dépend autant de la distance entre les étapes que des couleurs choisies. L’aperçu vous permet de juger le résultat avant de récupérer le code ou une image.
Choisir les couleurs
Commencez avec deux ou trois teintes. Le sélecteur facilite le choix visuel, tandis que le champ hexadécimal permet de reprendre exactement une couleur de votre charte.
Régler les transitions
Les positions indiquent où chaque teinte doit apparaître. Le bouton de répartition réorganise les positions régulièrement dans l’ordre des lignes. Une étape ajoutée se place au milieu du plus grand intervalle libre.
Préparer le bon format
Le CSS s’adapte à la surface de son élément. Une image PNG possède au contraire des dimensions fixes. Comparez votre création au format de l’export pour éviter une différence de proportions inattendue.
Faire évoluer une composition
Faites glisser un repère sur la barre commune ou ajustez sa position avec les flèches du clavier. Un clic sur un emplacement libre ajoute une couleur. Vous pouvez aussi saisir les positions dans les lignes compactes. Les lignes conservent leur ordre de travail, puis le code classe leurs positions. Lorsque deux couleurs partagent une position, leur ordre dans le formulaire détermine le passage immédiat de la première à la seconde. Ce comportement est utile pour tracer des bandes nettes.
Les exemples sont des points de départ modifiables. La palette aléatoire remplace les couleurs et répartit les étapes. Pour recommencer complètement, la remise à zéro demande un second clic afin d’éviter une perte involontaire de votre composition.
Choisir entre CSS et PNG
Le bouton de copie fournit une règle prête à intégrer à votre feuille de style. Renommez la classe pour correspondre à votre page. La déclaration seule convient si vous possédez déjà un sélecteur. L’espace de couleur sRGB est indiqué dans le code et requiert un navigateur compatible avec cette syntaxe moderne.
Le PNG est calculé dans votre navigateur. Il contient uniquement le dégradé, sans le cadre de présentation ni les coins arrondis. Aux bords, certaines étendues radiales ont un rayon nul. L’export est alors désactivé avec une explication, tandis que le code CSS reste disponible.
Partager et vérifier avant usage
Le lien de ce calcul inscrit les réglages dans la partie située après le signe dièse de l’adresse. Une personne qui reçoit le lien peut reproduire la composition puis la modifier. Conservez ce lien si vous souhaitez retrouver vos couleurs plus tard, car aucun historique n’est enregistré par cet outil.
Avant d’utiliser un dégradé derrière du texte, vérifiez la lisibilité sur toutes ses zones, y compris aux extrémités. Une couleur de texte lisible sur la première étape peut devenir difficile à lire sur la dernière. Retrouvez les autres outils de création dans le catalogue VMaths.
Méthode de rendu
- Géométrie des dégradés — spécification W3C CSS Images.
- Export bitmap — Canvas 2D, standard WHATWG. Références consultées le 8 octobre 2026.