Concevez un dégradé CSS et copiez le code
Ce générateur de dégradé CSS crée visuellement des fonds <code>linear-gradient()</code>, <code>radial-gradient()</code> et <code>conic-gradient()</code>. Cliquez sur la barre des arrêts pour ajouter des couleurs, faites-les glisser à leur place, réglez l'opacité de chaque arrêt, puis ajustez l'angle, la forme ou le centre pendant que l'aperçu se met à jour en direct. Copiez le CSS avec une couleur de repli unie, copiez une classe Tailwind prête à l'emploi ou exportez le dégradé en PNG à n'importe quelle taille. Collez un dégradé de votre feuille de style pour le modifier ici. Tout s'exécute localement dans votre navigateur.
Comment créer un dégradé CSS
- 1Choisissez Linéaire, Radial ou Conique, ou partez d'un des préréglages.
- 2Cliquez n'importe où sur la barre pour ajouter un arrêt de couleur, faites glisser les arrêts pour les déplacer et appuyez sur Suppr sur un arrêt sélectionné pour le retirer. Les flèches déplacent l'arrêt sélectionné de 1 %, Maj+flèche de 10 %.
- 3Choisissez la couleur et l'opacité de chaque arrêt. Toute couleur CSS fonctionne : hex,
rgb(),hsl(),oklch()ou un nom de couleur. - 4Réglez l'angle avec le cadran (maintenez Maj pour avancer par pas de 15°) ou, pour les dégradés radiaux et coniques, faites glisser sur l'aperçu pour déplacer le centre.
- 5Copiez le CSS ou la classe Tailwind, ou indiquez une largeur et une hauteur et téléchargez un PNG.
Dégradés linéaires, radiaux et coniques
- linear-gradient()
- Les couleurs changent le long d'une ligne droite orientée selon un angle. <code>0deg</code> pointe vers le haut, <code>90deg</code> vers la droite ; les mots-clés <code>to right</code> et <code>to bottom left</code> disent la même chose en toutes lettres. La ligne du dégradé est juste assez longue pour que les coins reçoivent la première et la dernière couleur.
- radial-gradient()
- Les couleurs rayonnent depuis un centre en cercle ou en ellipse. Le mot-clé de taille fixe l'emplacement de 100 % : <code>farthest-corner</code> (par défaut) atteint le coin le plus éloigné de la boîte, <code>closest-side</code> s'arrête au bord le plus proche.
- conic-gradient()
- Les couleurs tournent autour d'un centre comme les aiguilles d'une montre, à partir de l'angle <code>from</code>. Des arrêts nets donnent des camemberts et des roues chromatiques sans aucune image.
Arrêts de couleur, bords nets et transparence
Chaque arrêt de couleur est une couleur et une position. Entre deux arrêts, le navigateur fond les couleurs en douceur ; quand deux arrêts partagent la même position, la couleur change brusquement, et c'est ainsi qu'on dessine rayures, drapeaux et camemberts. Donnez la même couleur à deux arrêts voisins pour la garder en bande unie.
Les arrêts peuvent être partiellement transparents : un dégradé peut ainsi fondre une image dans la page ou assombrir le bas d'une image d'en-tête pour que le texte blanc reste lisible. Les navigateurs modernes mélangent les arrêts transparents en couleur prémultipliée, donc un fondu vers transparent ne devient plus gris au milieu, mais le générateur écrit quand même la couleur rgba() explicite pour plus de clarté.
Dégradés répétés
repeating-linear-gradient() et ses équivalents radial et conique répètent le motif compris entre le premier et le dernier arrêt sur toute la boîte. Activez Répéter et placez le dernier arrêt bien avant 100 %, à 10 % par exemple, pour obtenir des rayures, des anneaux ou des rayons de soleil. Si le dernier arrêt est à 100 %, un dégradé répété ressemble exactement à un dégradé normal.
Couleur de repli, Tailwind et export PNG
Les dégradés sont des images : un navigateur incapable d'en dessiner n'affiche rien derrière votre texte. La ligne de repli facultative définit d'abord un background uni, la moyenne de vos arrêts, et la ligne du dégradé qui suit la remplace partout où les dégradés fonctionnent.
La sortie Tailwind est une classe à valeur arbitraire comme bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)]. Les espaces deviennent des tirets bas car les noms de classe Tailwind ne peuvent pas contenir d'espaces ; elle fonctionne avec Tailwind 3 et 4 sans configuration.
L'export PNG peint le même dégradé sur un canvas à la taille choisie, jusqu'à 8192 pixels par côté, pour des fonds d'écran, des images de réseaux sociaux ou des outils de design qui ne lisent pas le CSS. Choisissez des couleurs adaptées à votre texte avec le vérificateur de contraste, convertissez-les d'une notation à l'autre avec le convertisseur de couleurs ou ajoutez du relief avec le générateur de box-shadow.
Modifier un dégradé existant
Collez un dégradé dans Importer : un simple linear-gradient(…), une déclaration background: ou background-image: complète, une version préfixée -webkit- ou une classe Tailwind bg-[…]. Les directions comme to top right, les angles en deg, turn ou rad, les arrêts à deux positions et les arrêts sans position sont tous reconnus. Les positions en pixels et les indications de couleur ne peuvent pas s'afficher sur une barre en pourcentages : elles sont donc approchées, et l'import vous le signale.
Questions fréquentes
- Comment faire un fond en dégradé en CSS ?
- Donnez à background (ou background-image) une fonction de dégradé, par exemple background: linear-gradient(90deg, #ff7e5f, #feb47b);. Ce générateur écrit cette ligne pour vous, avec une couleur de repli unie facultative avant.
- 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 rayonne depuis un centre en cercles ou en ellipses, et un dégradé conique tourne autour d'un centre comme une aiguille de montre.
- Comment faire un bord net ou des rayures ?
- Placez deux arrêts à la même position avec des couleurs différentes. Pour des rayures répétées, activez Répéter et placez le dernier arrêt sur une petite valeur, comme 10 %.
- Un dégradé CSS peut-il être transparent ?
- Oui. Baissez l'opacité d'un arrêt et le générateur l'écrit en rgba(). Un dégradé d'une couleur vers transparent est une façon courante de fondre une image ou un calque dans la page.
- Comment utiliser un dégradé dans Tailwind CSS ?
- Copiez la classe Tailwind, une valeur arbitraire comme bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)], et ajoutez-la à votre élément. Les utilitaires from-/via-/to- de Tailwind ne couvrent que les dégradés linéaires simples ; la valeur arbitraire accepte n'importe quel dégradé.
- Les dégradés coniques fonctionnent-ils dans tous les navigateurs ?
- conic-gradient() fonctionne dans toutes les versions actuelles de Chrome, Edge, Firefox et Safari. Ajoutez la couleur de repli si vous prenez encore en charge de très anciens navigateurs.
- Puis-je télécharger le dégradé en image ?
- Oui. Saisissez une largeur et une hauteur, puis téléchargez un PNG. L'image est dessinée dans votre navigateur exactement à cette taille, jusqu'à 8192 × 8192 pixels.
- Quelque chose est-il envoyé en ligne ?
- Non. L'aperçu, le CSS et l'export PNG sont tous produits dans votre navigateur.