Générateur de dégradé CSS

Réglez le type, l’angle et les couleurs. Le code se met à jour à chaque changement.

Code CSS

Le générateur de dégradé CSS est un outil gratuit qui s’exécute entièrement dans votre navigateur, sans aucun envoi vers un serveur. Composer un dégradé et copier la ligne CSS correspondante.

Les trois types de dégradé

Le dégradé linéaire file dans une direction donnée par un angle : 0° monte vers le haut, 90° va vers la droite. Le radial rayonne depuis un point central, ce qui convient aux halos et aux boutons bombés. Le conique tourne autour du centre comme l’aiguille d’une horloge : c’est lui qui sert à dessiner des camemberts ou des roues chromatiques en pur CSS.

Placer les couleurs au bon endroit

Chaque couleur porte une position exprimée en pourcentage du parcours. Deux couleurs très rapprochées produisent une transition franche, presque une frontière nette ; largement écartées, elles donnent un fondu doux. Placer deux couleurs identiques à la même position crée une bande de couleur pleine, sans dégradé.

Coller le résultat dans une feuille de style

La ligne produite s’utilise telle quelle comme valeur de background. Sur un titre, ajoutez background-clip: text et une couleur de texte transparente pour teinter les lettres elles-mêmes plutôt que le bloc.

Ce que cet outil ne fait pas

Cet outil produit un dégradé unique : il ne superpose pas plusieurs couches, ne gère pas les positions autres que le centre pour le radial, et n’exporte pas d’image. Pour un fichier PNG ou JPEG, faites une capture depuis votre navigateur.

Questions fréquentes

Quel angle pour un dégradé de haut en bas ?

En CSS, 180° descend du haut vers le bas et 0° remonte du bas vers le haut. C’est l’inverse de l’intuition de beaucoup de gens, la référence étant la direction vers laquelle le dégradé se dirige.

Le rendu sera-t-il le même sur tous les navigateurs ?

Les dégradés linéaires et radiaux sont pris en charge partout depuis longtemps. Le dégradé conique est plus récent : il fonctionne sur les versions actuelles de Chrome, Firefox, Safari et Edge, mais pas sur des navigateurs très anciens.

Mes données sont-elles envoyées sur un serveur ?

Non : le texte que vous saisissez ou collez est traité entièrement dans votre navigateur, sur votre appareil. Il n’est jamais transmis à un serveur.

Faut-il créer un compte ou installer quelque chose ?

Non : l’outil fonctionne directement dans cette page, sans inscription ni installation.