Générateur de dégradés CSS

Définissez la propriété background (ou background-image) avec une fonction de dégradé. Le plus simple est un dégradé linéaire à deux couleurs : background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); — cela peint un fondu de gauche à droite de l'indigo au rose. Choisissez vos couleurs et votre angle ci-dessus, puis copiez la ligne background prête à l'emploi directement dans votre feuille de style. Inutile d'écrire la syntaxe à la main — le générateur la construit au fur et à mesure que vous déplacez chaque point.

Un linear-gradient fond les couleurs le long d'une ligne droite selon un angle que vous choisissez (par ex. 90deg = de gauche à droite). Un radial-gradient rayonne vers l'extérieur depuis un point central en cercles ou ellipses, comme un projecteur. Un conic-gradient balaie les couleurs autour d'un point central comme les aiguilles d'une horloge, ce qui le rend idéal pour les roues chromatiques et les graphiques en secteurs. Cet outil génère les trois types ; basculez avec les boutons Linéaire / Radial / Conique. La plupart des outils de dégradé gratuits comme le générateur de fond de Canva ne proposent que des dégradés linéaires, et cssgradient.io ne prend pas en charge les dégradés coniques.

Appliquez un dégradé à la propriété background de n'importe quel élément. Pour un fond pleine page, essayez : body { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); min-height: 100vh; }. Comme un dégradé est considéré comme une image, vous pouvez également ajouter background-attachment: fixed; pour qu'il reste fixe pendant le défilement. Créez-le visuellement ci-dessus et copiez le CSS. Nul besoin de Figma, Canva, ou d'un quelconque outil de design. Fonctionne de la même façon sur tous les navigateurs modernes sans préfixes en 2026.

Ajoutez des points de couleur supplémentaires, chacun avec sa propre position. Cliquez n'importe où sur la barre de dégradé (ou sur le bouton + Ajouter un point) pour déposer un nouveau point, puis faites-le glisser où vous le souhaitez. Trois couleurs ressemble à : linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #00ff00 100%). Il n'y a pas vraiment de limite — ajoutez autant de points que votre design en a besoin. Contrairement à coolors.co qui affiche seulement des palettes de couleurs sans le CSS correspondant, ou à Canva qui conditionne la modification des dégradés à un compte, cet outil génère un CSS de production avec des points illimités immédiatement.

Pour un dégradé linéaire, la première valeur est l'angle : 0deg pointe vers le haut, 90deg vers la droite, 180deg vers le bas, 270deg vers la gauche. Vous pouvez aussi utiliser des mots-clés comme 'to right' ou 'to bottom right', ainsi linear-gradient(to right, ...) est identique à linear-gradient(90deg, ...). Faites glisser le curseur Angle ou cliquez sur une flèche de direction ci-dessus et la valeur se met à jour en temps réel. Le CSS de sortie se met à jour instantanément afin que vous puissiez le copier-coller directement dans n'importe quelle feuille de style ou framework.

En 2026, non. linear-gradient, radial-gradient et conic-gradient sont pris en charge sans préfixe dans tous les navigateurs actuels, donc un simple background: linear-gradient(...) suffit. Vous n'ajouteriez -webkit- que pour de très anciens Safari/iOS (avant 2017) ou d'anciens Android WebView. Cochez 'Ajouter le préfixe -webkit-' dans la sortie CSS et l'outil émet une ligne de repli correctement convertie au-dessus de la ligne standard. La conversion de l'angle (90deg devient 270deg dans la version webkit) est gérée automatiquement.

Utilisez les utilitaires de dégradé : une classe de direction plus les couleurs from-, via- et to-, par ex. bg-gradient-to-r from-indigo-500 to-pink-500. Pour des couleurs précises, utilisez des valeurs arbitraires : bg-gradient-to-r from-[#6366f1] to-[#ec4899]. Basculez la sortie vers l'onglet Tailwind pour copier les classes correspondant à votre dégradé actuel, y compris une valeur arbitraire bg-[linear-gradient(...)] pour les dégradés radiaux et coniques, pour lesquels Tailwind n'a pas de raccourci nommé. La plupart des ressources Tailwind ne couvrent pas ce cas particulier.

Cliquez sur Télécharger PNG. L'outil peint votre dégradé exact sur un canvas HTML de 1600x900 et l'enregistre en .png, idéal pour un fond de présentation, une bannière pour les réseaux sociaux ou une maquette. Le rendu s'effectue entièrement dans votre navigateur, rien n'est envoyé. Contrairement à TinyWow qui exige un envoi de fichier vers un serveur, ou à Adobe Express qui réserve l'export PNG à un abonnement payant, il n'y a ici aucun risque pour la vie privée et aucun coût. Besoin d'une autre taille ? Redimensionnez ou recadrez le PNG dans n'importe quel éditeur d'images ensuite.

Cliquez sur 'Depuis l'image' et choisissez une photo. L'outil lit les pixels localement, trouve les couleurs les plus présentes, et crée un dégradé à partir d'elles — une façon rapide de s'accorder à une photo de marque ou une image produit. Votre image ne quitte jamais votre appareil ; elle est analysée dans le navigateur et supprimée immédiatement. Contrairement à Adobe Color ou Coolors qui nécessitent un envoi ou un compte pour extraire des palettes, tout reste privé sur votre machine. Vous pouvez ensuite ajuster les points extraits, changer l'angle, ou passer au radial ou conique.

Un dégradé conique fait tourner ses couleurs autour d'un point central plutôt que le long d'une ligne, de sorte que la transition balaie comme une aiguille d'horloge. conic-gradient(from 0deg, red, yellow, green, blue, red) crée une roue chromatique complète. Ils sont idéaux pour les graphiques en secteurs, les anneaux de progression, les sélecteurs de couleur et les effets de lueur angulaire. La prise en charge par les navigateurs est solide depuis 2021 sur Chrome, Firefox, Safari et Edge sans préfixe. Sélectionnez Conique ci-dessus, définissez l'angle de départ et la position centrale, et expérimentez. La plupart des outils générateurs de dégradé ne prennent pas en charge le conique.

Attribuez une valeur alpha à un point. Réduisez le curseur Opacité d'un point et le CSS bascule vers rgba(). Par exemple, linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) passe du transparent à un noir à 60 %, le classique voile sombre derrière du texte sur une photo. Conseil : fondez entre la même couleur (du transparent vers la couleur pleine d'une même teinte) pour éviter un gris terne au milieu que les navigateurs produisent lorsqu'on fait fondre deux couleurs entièrement transparentes différentes. L'outil gère automatiquement la sortie rgba lorsque vous ajustez l'opacité d'un point.

Le générateur de dégradé d'UtiloKit couvre tout ce que ces outils font — types de dégradé linéaire, radial et conique, éditeurs multi-points, copie du code — plus la sortie Tailwind CSS, le téléchargement PNG, l'extraction de dégradé depuis une image, les liens partageables et le support des dégradés animés. cssgradient.io ne prend pas en charge les dégradés coniques et n'a pas de sortie Tailwind. L'éditeur de dégradé de Colorzilla est une extension navigateur qui n'exporte ni PNG ni Tailwind. Tout fonctionne ici dans votre navigateur sans envoi, sans inscription et sans publicité conditionnant les fonctionnalités.

Oui. L'outil est entièrement responsive et fonctionne dans n'importe quel navigateur mobile moderne. Ouvrez-le dans Safari sur iPhone ou Chrome sur Android, créez votre dégradé, et copiez le CSS directement dans votre presse-papiers. Comme tout s'exécute côté client, aucun téléchargement n'est requis et cela fonctionne même sur des connexions mobiles lentes une fois la page chargée. L'éditeur de points basé sur le glisser-déposer s'adapte aux entrées tactiles, ce qui permet de créer facilement des dégradés multi-points sur un téléphone.