Aller au contenu

Générateur de dégradé CSS

Créez un dégradé linéaire ou radial de deux à quatre couleurs.

Réglages du dégradé

Traitement dans le navigateur.

Entier de 2 à 4.

0–360 degrés ; mode linéaire.

0–100 % ; mode radial.

0–100 % ; mode radial.

HEX opaque de 3 ou 6 chiffres.

0 transparent, 1 opaque.

0–100 % ; ordre croissant.

HEX opaque de 3 ou 6 chiffres.

0 transparent, 1 opaque.

0–100 % ; ordre croissant.

HEX opaque de 3 ou 6 chiffres.

0 transparent, 1 opaque.

0–100 % ; ordre croissant.

HEX opaque de 3 ou 6 chiffres.

0 transparent, 1 opaque.

0–100 % ; ordre croissant.

Dégradé généré

Réglez le dégradé, puis générez le CSS.

Créer un dégradé CSS

Créez une image de fond non répétée à partir d’arrêts de couleur explicites.

  1. Choisissez Linéaire ou Radial.
  2. Choisissez de deux à quatre arrêts.
  3. Saisissez couleur, opacité et position.
  4. Réglez l’angle ou le centre.
  5. Générez, comparez et copiez.

Syntaxe CSS

linear-gradient suit une ligne et 0deg pointe vers le haut. radial-gradient(circle at X% Y%) part du centre choisi.

Arrêts de couleur

Les positions vont de 0 à 100 % dans l’ordre croissant. Deux positions identiques créent une coupure nette.

État confirmé

Toute modification efface l’ancien résultat, la copie et l’aperçu jusqu’à une nouvelle génération.

Limites

  • Pas de répétition, poignée, préréglage, palette ni animation.
  • Vérifiez séparément le contraste du texte.

Exemples

linear-gradient(90deg, #FF0000 0%, #0000FF 100%).

radial-gradient(circle at 25% 75%, #FFFFFF 0%, #000000 100%).

Questions fréquentes

Deux arrêts peuvent-ils partager une position ?

Oui, cela produit une transition franche.

Pourquoi aucun préfixe ?

La sortie utilise la syntaxe standard actuelle.