Générateur de dégradé CSS

Qu’est-ce qu’un générateur de dégradé CSS ?#

Un dégradé CSS est une transition progressive entre deux couleurs ou plus, peinte par le navigateur le long d’une ligne, d’un rayon ou autour d’un angle. Bien utilisé, un seul dégradé peut remplacer une image d’arrière-plan de 200 kilo-octets — il s’adapte à toute taille, reste net sur tous les écrans et se livre en une ligne de CSS. Le difficile n’est pas d’écrire la syntaxe, c’est de voir le résultat pendant que vous ajustez les couleurs, l’angle et les points d’arrêt.

Cette page est un atelier en direct pour cela. Vous faites glisser les points d’arrêt, ajustez l’angle, basculez entre cinq types de dégradés, et la page émet la déclaration exacte linear-gradient(...) (ou radial-, conic-, repeating-) dont votre feuille de style a besoin — plus un extrait Tailwind v4 @theme prêt à coller qui transforme chaque couleur en un jeton réutilisable.

Comment l’utiliser#

1. Choisissez un Type de dégradé :
   • Linéaire — les couleurs transitionnent le long d’une ligne droite à un angle choisi. Valeur par défaut ; couvre la plupart des usages.
   • Radial — les couleurs rayonnent vers l’extérieur depuis un point central. Idéal pour les projecteurs et les vignettes.
   • Conique — les couleurs balaient autour d’un centre comme un camembert. Utile pour les cercles chromatiques et les fonds de spinner.
   • Linéaire répété / Radial répété — le même dégradé juxtaposé, produisant des rayures ou des anneaux concentriques.
2. Pour les types linéaire et conique, faites glisser le curseur Angle (0–359°). L’aperçu se met à jour en direct ; 0° pointe vers le haut, 90° vers la droite, 135° est la diagonale classique du haut-gauche vers le bas-droit.
3. Pour les types radiaux, choisissez une Forme — Cercle ou Ellipse (la valeur par défaut pour les arrière-plans pleine largeur adaptatifs).
4. Gérez vos Points de couleur :
   • Chaque point a un échantillon de couleur et une position sur la barre de dégradé (0–100 %).
   • Faites glisser les poignées sur la barre pour déplacer un point, ou saisissez une position précise.
   • Cliquez sur Ajouter un point pour en insérer un nouveau ; cliquez sur la × d’un point pour le supprimer.
   • Un dégradé nécessite au moins deux points.
5. Lisez les deux sorties en bas : CSS (la valeur de dégradé brute) et Tailwind v4 (un bloc @theme qui enregistre chaque couleur comme un jeton --color-grad-*, plus une utilité .bg-gradient qui les consomme). Utilisez le bouton Copier à côté de chacune.

Caractéristiques principales#

• Cinq types de dégradés dans un seul outil. Linéaire, radial, conique et les deux variantes répétées — basculez sans avoir à ressaisir les couleurs.
• Aperçu en direct et au pixel près. Le grand bloc à droite est le dégradé réel que vous allez livrer ; ce que vous voyez est ce que votre feuille de style reçoit.
• Barre de points à poignées glissantes. Repositionnez n’importe quel point de couleur par glissement ; le pourcentage se met à jour au fil du mouvement.
• Double sortie. CSS brut pour les feuilles écrites à la main, et un extrait Tailwind v4 @theme (chaque point devient un jeton --color-grad-*, consommé par une utilité .bg-gradient) pour les projets utility-first — les deux toujours synchronisés.
• Lecture de l’angle. Le degré exact est affiché à côté du curseur, pour reproduire un dégradé précisément ailleurs.
• Zéro téléversement. Couleurs, points et angle ne quittent jamais le navigateur.

Exemple commenté#

Supposons que vous vouliez un dégradé de marque calme, légèrement diagonal, allant de l’indigo au sarcelle. Choisissez Linéaire, réglez l’angle sur 135° et utilisez deux points :

• Point 1 : #4F46E5 à 0 % (indigo)
• Point 2 : #0D9488 à 100 % (sarcelle)

La sortie CSS est :

linear-gradient(135deg, #4F46E5 0%, #0D9488 100%)

et l’extrait Tailwind v4 est :

@theme {
  --color-grad-1: #4F46E5;
  --color-grad-2: #0D9488;
}

.bg-gradient {
  background-image: linear-gradient(135deg, var(--color-grad-1) 0%, var(--color-grad-2) 100%);
}

Plutôt que d’intégrer les valeurs hex en dur, la sortie Tailwind enregistre chaque point comme un jeton de design --color-grad-* à l’intérieur de @theme, puis fait pointer une seule utilité .bg-gradient vers eux via var(...). Changez une variable et tous les endroits qui la consomment se mettent à jour d’un coup. Vous voulez une troisième couleur, plus douce, au milieu ? Cliquez sur Ajouter un point, réglez #7C3AED à 50 %, et l’extrait fait grossir le jeton --color-grad-2: #7C3AED tandis que le sarcelle descend à --color-grad-3 — les points sont toujours renumérotés par position, donc les noms ne se désynchronisent jamais de la barre.

FAQ#

Quelle est la différence entre linéaire, radial et conique ?#

Linéaire transitionne le long d’une ligne droite définie par un angle. Radial transitionne vers l’extérieur depuis un point, produisant un cercle ou une ellipse de couleur. Conique transitionne autour d’un point — imaginez un cercle chromatique qui tourne, où chaque angle est une teinte différente. Les variantes répétées de chacun juxtaposent le motif pour créer des rayures ou des anneaux.

Pourquoi la sortie Tailwind définit-elle des variables --color-grad-* au lieu d’intégrer les couleurs ?#

Tailwind v4 a déplacé la configuration dans le CSS via le bloc @theme, où chaque entrée devient un jeton de design réutilisable. En émettant chaque point sous forme de --color-grad-1, --color-grad-2, … et en faisant référencer .bg-gradient via var(...), l’extrait vous offre une palette réutilisable partout — bordures, texte, ombres — pas seulement cet arrière-plan. Éditez une seule variable et tous les consommateurs se mettent à jour. (Sur Tailwind v3, il n’y a pas de @theme ; collez plutôt la sortie CSS dans votre feuille de style.)

Puis-je faire un changement de couleur net au lieu d’une transition douce ?#

Oui. Donnez à deux points la même position — par exemple #000 50 % et #fff 50 %. Sans distance entre eux, la transition a une largeur nulle, donc le passage devient une ligne nette. C’est ainsi qu’on construit des fonds rayés ou à bandes sans image.

Le dégradé conique semble pivoté par rapport à mon outil de design. Pourquoi ?#

Les différents outils mesurent différemment l’angle de départ d’un dégradé conique. Le CSS mesure l’angle from dans le sens horaire depuis le haut (12 h). Si votre outil de design mesure depuis la droite (3 h) ou dans le sens antihoraire, soustrayez ou ajoutez 90° (ou inversez le signe) jusqu’à ce que l’aperçu corresponde.