Générateur de dégradé CSS avec aperçu en direct

Mode d'emploi

Choisissez un Type de dégradé : une ligne où la couleur change (linéaire), une diffusion depuis le centre (radial) ou une rotation autour d'un point (conique).
Réglez l'Angle pour un dégradé linéaire ou conique. Il ne s'applique pas à un dégradé radial.
Choisissez chaque couleur dans Arrêts de couleur et indiquez sa position en pour cent. Ajoutez ou supprimez des arrêts, de deux à six.
Cliquez sur Copier sous CSS et collez la ligne dans votre feuille de style, ou partez d'un des Préréglages.

Les trois types de dégradé

Linéaire : la couleur change le long d'une ligne droite. Un angle de 0deg pointe vers le haut, et l'angle tourne dans le sens des aiguilles d'une montre : 90deg va de gauche à droite, et 180deg de haut en bas.
Radial : les couleurs se diffusent depuis le centre en cercle, du premier arrêt au dernier.
Conique : les couleurs tournent autour du centre, comme les aiguilles d'une horloge. L'angle indique l'endroit où commence la première couleur.

Arrêts de couleur et positions

Un arrêt de couleur est une couleur placée à une position de 0 % à 100 % le long du dégradé. L'éditeur écrit les arrêts dans l'ordre des positions : l'ordre de saisie ne change donc pas l'image. De deux à six arrêts, le dégradé reste facile à lire et le CSS reste court.

Le code est la syntaxe CSS standard que lisent les navigateurs actuels, et l'aperçu est dessiné par votre navigateur à partir de la même valeur : ce que vous voyez est ce que reçoit la feuille de style.

Exemple détaillé : le préréglage Lever de soleil

Le préréglage Lever de soleil est un dégradé linéaire à 135deg, qui va du haut gauche vers le bas droit. Il compte trois arrêts : orange à 0 %, jaune à 50 % et rose à 100 %.

Le CSS obtenu est : background: linear-gradient(135deg, #f97316 0%, #facc15 50%, #ec4899 100%);

Questions fréquentes

Que signifie 0deg dans un dégradé linéaire ?

0deg pointe vers le haut : avec cet angle, les couleurs vont du bas vers le haut. L'angle tourne dans le sens des aiguilles d'une montre : 90deg va de gauche à droite, et 180deg de haut en bas.

Pourquoi mes arrêts sont-ils dans un autre ordre dans le code ?

Le code écrit les arrêts dans l'ordre des positions, car le CSS les lit dans cet ordre. Si vous saisissez 80 % avant 20 %, le code écrit d'abord 20 %, et l'image ne change pas.

Puis-je utiliser une couleur transparente ?

Cet éditeur accepte des couleurs pleines écrites en hexadécimal. Pour la transparence, modifiez le code à la main et utilisez une couleur avec une valeur alpha.

Combien d'arrêts de couleur puis-je utiliser ?

De deux à six. L'éditeur garde le nombre dans cette plage, pour que le dégradé ait toujours un début et une fin.

Le code fonctionne-t-il dans tous les navigateurs ?

La syntaxe est la forme standard que prennent en charge les navigateurs actuels. Vérifiez le résultat dans les navigateurs de vos visiteurs, surtout si vous devez prendre en charge des versions plus anciennes.

Mon dessin est-il envoyé quelque part ?

Non. Le dégradé est construit dans votre navigateur. Rien n'est enregistré ni envoyé à un serveur.

Puis-je utiliser un dégradé pour la couleur du texte ?

Cet outil écrit seulement la déclaration de fond. Mettre un dégradé derrière un texte est possible, mais demande davantage de CSS que n'en écrit cet outil.

Sources

Chiffres et texte vérifiés pour la dernière fois le mardi 10 novembre 2026.