Composez des dégradés CSS linéaires, radiaux et coniques de A à Z, avec gestion multi-points déplaçables et préréglages soignés. Copiez le CSS prêt à coller instantanément.

Aperçu en direct
Préréglages
Type de dégradé
Angle
°
Points de couleur
Déplacez une poignée pour bouger un point, ou cliquez la barre pour en ajouter un. Sélectionnez un point pour modifier sa couleur.
Point sélectionné
%
CSS
background: ;

Tout est calculé en direct dans votre navigateur — aucune inscription, entièrement gratuit.


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

Le Générateur de dégradé construit des dégradés CSS personnalisés à partir de zéro. Choisissez un type linéaire, radial ou conique, réglez l'angle, et façonnez le mélange avec un éditeur multi-points : faites glisser les poignées pour déplacer les points d'arrêt, cliquez sur la barre pour en ajouter de nouveaux, et recolorez n'importe quel point avec un sélecteur — l'aperçu en direct se met à jour au fur et à mesure.

Des préréglages soignés vous donnent un excellent point de départ quand vous ne voulez pas commencer d'une page blanche, et des actions en un clic — aléatoire, inverser, pivoter de 45° — accélèrent l'exploration. Le CSS généré est toujours visible et reste synchronisé avec l'aperçu, donc ce que vous copiez est exactement ce que vous avez vu.

Tout est calculé en direct dans votre navigateur, sans aucun coût. Copiez la règle CSS complète ou seulement la valeur de fond et collez-la dans une feuille de style, un style de bouton ou une section héros — un générateur de dégradé CSS simple pour les fonds, les superpositions et les accents d'interface.

Comment utiliser Générateur de dégradé

  1. Choisissez un type de dégradé : linéaire, radial ou conique.
  2. Partez d'un préréglage ou cliquez sur « Aléatoire » pour un point de départ instantané.
  3. Faites glisser les poignées des points d'arrêt pour positionner les couleurs, cliquez sur la barre pour ajouter des points, et modifiez la couleur de chaque point.
  4. Ajustez l'angle, ou utilisez « Inverser » et « Pivoter de 45° » pour réorienter le mélange.
  5. Copiez la règle CSS ou la valeur de fond et collez-la dans votre projet.

Questions fréquentes

Oui. L'outil fonctionne entièrement côté client — sans inscription, sans crédits et sans limite sur le nombre de dégradés que vous créez ou copiez.

Un dégradé linéaire mélange les couleurs le long d'une ligne droite selon l'angle choisi. Un dégradé radial rayonne vers l'extérieur depuis un point central en cercles. Un dégradé conique fait tourner les couleurs autour d'un point central comme un diagramme circulaire, ce qui est idéal pour les roues chromatiques et les anneaux de progression.

Un dégradé nécessite au moins deux points d'arrêt, et vous pouvez continuer à cliquer sur la barre pour en ajouter davantage. Chaque point a sa propre couleur et une position déplaçable, ce qui rend facile la création de mélanges multicolores complexes.

Les dégradés linéaires et radiaux sont pris en charge partout. Les dégradés coniques sont pris en charge par tous les navigateurs modernes mais pas par les très anciens, prévoyez donc une couleur de fond de repli si vous devez prendre en charge des versions anciennes.

Oui — utilisez l'outil complémentaire Générateur de dégradé à partir d'image, qui extrait les couleurs dominantes d'une photo importée et les transforme en points d'arrêt de dégradé modifiables. Cet outil-ci en est le pendant à partir de zéro.


Recherches populaires
générateur de dégradé créateur de dégradé css générateur de dégradé linéaire créateur de dégradé radial dégradé conique css générateur de dégradé gratuit
Besoin d'aide ?
Un problème avec cet outil ? Signalez-le à notre équipe.
Signaler un problème

Ajoutez cet outil gratuit à votre propre site web — copiez-collez le code ci-dessous.