Skip to content
Design · undefined

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

Créez des dégradés linéaires, radiaux et coniques visuellement. Ajustez les arrêts de couleur, choisissez un espace colorimétrique et copiez le CSS.

In-browser only Linear, Radial & Conic One-click Copy
deg
#6366f1
%
#a855f7
%
#ec4899
%
background: linear-gradient(
  135deg,
  #6366f1 0%,
  #a855f7 50%,
  #ec4899 100%
);
Coucher de soleil
Océan
Forêt
Néon
Pastel
Monochrome

Comment utiliser

Créez votre dégradé en quatre étapes

  1. 1
    Choisissez le type de dégradé

    Sélectionnez Linéaire, Radial ou Conique en haut de l'outil.

  2. 2
    Ajoutez des arrêts de couleur

    Faites glisser les poignées sur la piste. Double-cliquez pour ajouter un nouvel arrêt.

  3. 3
    Ajustez l'angle et l'espace colorimétrique

    Définissez l'angle avec la saisie numérique ou les boutons de direction. Choisissez un espace colorimétrique.

  4. 4
    Copiez votre CSS

    L'aperçu CSS se met à jour en temps réel. Cliquez sur Copier le CSS ou utilisez le menu Exporter.

Questions fréquentes

Quelle est la différence entre dégradés linéaires, radiaux et coniques ?
Un dégradé linéaire passe d'une couleur à une autre le long d'une ligne droite. Un dégradé radial rayonne depuis un point central. Un dégradé conique fait pivoter les couleurs autour d'un centre.
Que signifie "espace colorimétrique" dans les dégradés CSS ?
L'espace colorimétrique détermine comment les couleurs intermédiaires sont calculées. sRGB est le plus compatible. oklch produit des transitions plus uniformes et vibrantes.
Puis-je exporter en SVG ?
Oui. Ouvrez le menu Exporter et cliquez sur Télécharger SVG.
Comment créer un lien partageable ?
Cliquez sur Partager le lien dans le menu Exporter. L'état complet du dégradé est encodé dans le hash de l'URL.