English
Español
Português
Français
Deutsch
Italiano
Türkçe
Bahasa IndonesiaGénérateur de dégradés
Créez des dégradés linéaires, radiaux et coniques avec 2 à 5 couleurs et angles personnalisés. Aperçu en direct, presets, aléatoire (Espace), sortie Tailwind et CSS, téléchargement PNG. Appuyez sur Espace pour mélanger.
Direction et forme
Étapes de couleur (2)
Sortie CSS
Télécharger le dégradé
Choisissez un format pour prévisualiser, puis téléchargez
Qu'est-ce qu'un générateur de dégradés ?
Des transitions douces, zéro image
Un dégradé fond deux couleurs ou plus le long d'une ligne, depuis un centre ou autour d'un point. Les navigateurs le rendent en CSS net et indépendant de la résolution, parfait pour héros, boutons, cartes et superpositions sans requête réseau.
Cet outil va au-delà des 2 couleurs de base : types linéaire, radial et conique, jusqu'à 5 étapes avec positions, 8 presets, inspiration aléatoire, classes arbitraires Tailwind et export PNG.
Utilisation
01
Choisissez type et couleurs
Linéaire, radial ou conique. Modifiez chaque étape avec sélecteur, HEX ou curseur 0 à 100 %. Ajoutez jusqu'à 5, réduisez à 2.
02
Réglez la direction
Curseur d'angle et presets à 45° pour linéaire et conique, forme et position pour radial. Essayez les presets ou Espace pour l'aléatoire.
03
Copiez et livrez
Copiez CSS ou Tailwind, téléchargez CSS et PNG, ou partagez l'URL, étapes et angle sont conservés dans ?type=&angle=&stops=.
Exemples concrets
Fonds de héros : 135deg indigo vers rose
Les voiles diagonaux en 2 couleurs restent lisibles sous texte blanc et tiennent en une ligne CSS. Partez du preset Indigo Pink.
Boutons et CTA : 90deg en 3 étapes
Les triples façon coucher de soleil ajoutent de la profondeur aux petits éléments. Gardez l'étape du milieu près de 50 % pour des fondus réguliers au survol.
Halos et projecteurs : radial
Une ellipse radiale en haut crée une aurore douce derrière les cartes. Associez à des surfaces sombres pour des superpositions au contraste sûr.
Anneaux de progression : conique
Les balayages coniques depuis l'angle conviennent aux camemberts et chargeurs. Deux étapes avec positions dures donnent des anneaux segmentés.
Livraison Tailwind
Copiez la classe arbitraire bg-[linear-gradient(...)] directement dans le balisage, ou enregistrez l'extrait de config pour un usage répété.
Visuels sociaux et OG
Téléchargez des instantanés PNG 1200x630 pour couvertures, miniatures et fonds temporaires sans ouvrir d'outil design.
Dégradés animés et texte en dégradé
Réutilisez chaque sortie : animez background-position pour des fonds chatoyants, ou associez-le à background-clip:text pour des titres en dégradé. Copiez le CSS et ajoutez deux keyframes.