Générateur de dégradé CSS

Comment ça marche

Saisissez vos couleurs dans le panneau de gauche : une couleur par ligne, l'ordre des lignes étant l'ordre du dégradé. Les écritures HEX, RGB et HSL sont toutes reconnues. Pour fixer une couleur à un endroit précis, ajoutez un pourcentage en fin de ligne : « #2F6FED 30 » cale cette couleur sur la marque des 30 %, et les couleurs sans position se répartissent également sur le reste. Choisissez ensuite le type — pour un dégradé linéaire, le curseur d'angle donne la direction (90 degrés va de gauche à droite, 180 de haut en bas), pour un dégradé conique il donne l'angle de départ, et le dégradé radial s'ouvre toujours du centre vers l'extérieur. L'aperçu suit chaque frappe. Dans le CSS produit, la première couleur figure aussi en background-color simple : même un client incapable de dessiner un dégradé n'affiche jamais une surface vide. Copiez le code, ou enregistrez le même dégradé en PNG de 1920×1080 pixels avec le bouton Télécharger.

Cet outil est aussi connu sous le nom de generateur degrade css, degrade css, linear gradient css, fond degrade css, conic gradient css, degrade en png.

Qu'est-ce que linear-gradient ?

linear-gradient est la fonction CSS qui fond deux couleurs ou plus le long d'une ligne droite. Son premier paramètre est l'angle de direction : 0 degré va de bas en haut, 90 degrés de gauche à droite, 180 de haut en bas. Viennent ensuite les étapes de couleur, chacune portant une couleur et une position facultative. Le navigateur calcule le mélange de chaque pixel entre deux étapes : la sortie n'est pas un fichier image mais une instruction de dessin, nette à toute résolution, dont les couleurs se changent en une ligne.

Qu'est-ce que Étape de couleur (color stop) ?

Une étape de couleur est le couple qui indique à un dégradé où une couleur apparaît à pleine intensité : une valeur de couleur et une position en pourcentage. Écrire « #2F6FED 30% » signifie que la couleur pure se trouve exactement à la marque des 30 % ; chaque pixel entre deux étapes est un mélange des deux. Donnez la même position à deux étapes et vous obtenez un bord franc au lieu d'un fondu — dans cet outil, les étapes sans position écrite se répartissent également, celles que vous positionnez restent exactement où vous les avez mises.

Quelle différence entre linear-gradient et radial-gradient ?

Les deux mélangent les couleurs selon les mêmes règles ; ce qui change, c'est la géométrie que suit la transition. linear-gradient verse les couleurs le long d'une ligne droite : vous choisissez l'angle de la ligne, et sur toute coupe perpendiculaire la couleur est constante — c'est l'outil des fonds bord à bord, des bandeaux et des remplissages de boutons. radial-gradient s'ouvre en anneaux depuis un centre : la première étape est au centre, la dernière sur l'anneau extérieur, et la notion de direction n'existe pas — c'est pourquoi le curseur d'angle ne s'y applique pas. Projecteur, vignettage, effet de focalisation : tout ce qui se lit de l'intérieur vers l'extérieur se construit avec la forme radiale.

Les pièges : ligne de raccord et effet de bandes

Un dégradé conique fait un tour complet et revient à son point de départ. Si votre dernière couleur diffère de la première, une ligne de raccord nette apparaît là où le cercle se referme — c'est la nature de la forme, pas un défaut. Pour un anneau continu, répétez la première couleur sur la dernière ligne ; l'outil répartit les positions en conséquence.

Le second piège est l'effet de bandes : quand deux tons très proches s'étirent sur une grande surface, les 256 niveaux par canal de l'écran ne suffisent plus à porter la transition et des paliers visibles apparaissent. Écarter les tons, réduire la zone de transition ou insérer une étape intermédiaire casse les bandes.

Quel type de dégradé pour quel usage ?

Le choix du type est autant une question de fonction que de goût ; les trois ont des usages établis.

• Linéaire → fonds de boutons et de cartes, bandeaux d'en-tête, arrière-plans de page
• Radial → effet projecteur, vignettage, point de focalisation
• Conique → camemberts, cercles chromatiques, anneaux de chargement
• Sortie PNG → là où le CSS ne va pas : fond de diapositive, gabarit d'e-mail, fond d'écran

Questions fréquentes

Comment régler la position de chaque couleur dans le dégradé ?

Ajoutez un nombre de 0 à 100 en fin de ligne : « #DB2777 75 » cale cette couleur sur la marque des 75 %. Le signe pour cent est facultatif ; les couleurs sans position se répartissent également sur le reste de l'intervalle.

Qu'enregistre le bouton Télécharger ?

Le dégradé de l'aperçu en PNG de 1920×1080 pixels. Pour le code CSS lui-même, utilisez le bouton de copie ; le code part dans le presse-papiers tel quel.

Combien de couleurs puis-je utiliser ?

De 2 à 12. Deux couleurs suffisent dans la plupart des cas ; avec plus d'étapes, l'ordre se règle par les lignes et les positions par les pourcentages en fin de ligne.

Le CSS produit fonctionne-t-il dans les anciens navigateurs ?

linear-gradient et radial-gradient fonctionnent depuis des années dans tous les navigateurs courants. conic-gradient est plus récent (versions à partir de 2020 environ) ; sur un client très ancien, c'est la ligne background-color du code qui prend le relais.