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

Créez des dégradés CSS linéaires, radiaux et coniques sur une piste visuelle et copiez le code en CSS, Tailwind ou SVG — directement dans votre navigateur.

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

De quoi s’agit-il

Cet outil vous laisse concevoir un dégradé en faisant glisser des points de couleur sur une piste au lieu d’écrire la syntaxe à la main. Choisissez un dégradé linéaire, radial ou conique, réglez l’angle, la forme et la position, donnez à chaque point sa couleur et son opacité, et choisissez l’espace colorimétrique pour des transitions plus douces. Le résultat se copie en CSS, en classe Tailwind ou en SVG.

Fonctionnalités principales

  • Dégradés linéaires, radiaux et coniques, y compris répétitifs.
  • Des points de couleur que vous ajoutez, déplacez et supprimez sur une piste interactive, chacun avec son opacité.
  • Angle, forme et position du centre.
  • Interpolation en sRGB, HSL, OKLab ou OKLCH.
  • Code en CSS, Tailwind ou SVG ; un dégradé aléatoire pour s’inspirer.

Comment l’utiliser

  1. Choisissez le type de dégradé, ou cliquez sur le bouton de dégradé aléatoire pour partir d’une idée.
  2. Cliquez sur la piste pour ajouter des points, faites-les glisser et réglez la couleur et l’opacité de chacun.
  3. Ajustez l’angle, la forme ou la position et, si vous voulez, l’espace colorimétrique.
  4. Copiez le code dans le format voulu.

Quand c’est utile

  • Créer un dégradé d’arrière-plan ou de bouton pour un site.
  • Obtenir un dégradé doux sans le milieu grisâtre des mélanges sRGB classiques.
  • Transformer un dégradé en SVG pour une illustration ou une icône.

Confidentialité et limites

Vos données

Le dégradé est créé dans votre navigateur et rien n’est envoyé à un serveur — le site reçoit seulement un événement anonyme « outil ouvert ». Un résultat envoyé vers un autre outil reste 24 heures sur cet appareil dans « Activité récente ».

Limites

  • Le SVG n’a pas de dégradés coniques : un dégradé conique est exporté en SVG comme dégradé linéaire.
  • Le SVG mélange toujours en sRGB, un dégradé OKLab ou OKLCH y paraît donc un peu différent.

Questions fréquentes

Quel espace colorimétrique choisir ?

OKLCH ou OKLab donnent des transitions régulières et vives — par exemple du bleu au jaune sans milieu gris terne. Le sRGB correspond à ce que produisent les outils plus anciens.

Pourquoi le SVG diffère-t-il du CSS ?

Le SVG n’a pas de dégradés coniques et ne mélange les couleurs qu’en sRGB. L’outil vous prévient quand l’une de ces différences s’applique.

Tous les navigateurs gèrent-ils les dégradés OKLCH ?

Tous les navigateurs actuels, oui. Pour les très anciens, choisissez le sRGB, qui fonctionne partout.