Générateur de dégradés CSS : créez de beaux dégradés sans écrire de code

Les dégradés CSS sont l'un des outils les plus puissants et les plus sous-utilisés de la boîte à outils du développeur front-end. Ils vous permettent de créer des transitions de couleurs fluides, des arrière-plans spectaculaires, une finition d'interface subtile et même des motifs visuels complexes — le tout sans le moindre fichier image. Avant que les dégradés CSS ne soient universellement pris en charge, les designers devaient exporter des arrière-plans en dégradé sous forme de PNG depuis Photoshop, ce qui entraînait des requêtes HTTP supplémentaires, des ressources statiques rigides et des mises en page qui se cassaient dès que quelqu'un changeait les couleurs de la marque. Aujourd'hui, une seule ligne de CSS remplace tout cela.

Ce guide couvre tout ce que vous devez savoir sur les dégradés CSS — les trois types, le système d'angles, des cas d'usage concrets avec du code prêt à copier, les erreurs courantes et comment utiliser le Générateur de dégradés CSS de BrowseryTools pour construire exactement ce dont vous avez besoin sans écrire une seule ligne à partir de zéro.

Pourquoi les dégradés CSS ont remplacé les arrière-plans basés sur des images

L'ancienne approche — exporter un PNG de dégradé de 1×1000 px et le répéter horizontalement — avait de réels coûts. Chaque dégradé était un aller-retour vers le serveur, un coût d'octets transmis et une charge de maintenance lorsque les couleurs changeaient. Plus important encore, les dégradés PNG ne pouvaient pas répondre dynamiquement aux tailles d'écran, aux changements de thème ou aux états de survol.

Les dégradés CSS résolvent tout cela. Ils sont rendus par le GPU en temps réel, répondent instantanément aux changements d'état JavaScript, s'adaptent parfaitement à n'importe quelle résolution, fonctionnent avec les transitions et animations CSS, et n'ajoutent aucun octet à votre ensemble de ressources. La prise en charge par les navigateurs est désormais de 100 % sur tous les navigateurs modernes et ce, depuis 2014. Il n'y a aucune raison d'utiliser des dégradés basés sur des images pour des transitions de couleurs unies dans les nouveaux projets.

Les trois types de dégradés CSS

1. Le dégradé linéaire

Un dégradé linéaire fait transitionner les couleurs le long d'une ligne droite. La direction peut être n'importe quel angle, ou exprimée par un mot-clé comme to right ou to bottom right. C'est le type de dégradé le plus couramment utilisé et il couvre la grande majorité des besoins de design.

/* Classic diagonal purple gradient */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Top to bottom (default direction) */
background: linear-gradient(#f8fafc, #e2e8f0);

/* Left to right with three color stops */
background: linear-gradient(to right, #f97316, #ec4899, #8b5cf6);

2. Le dégradé radial

Un dégradé radial rayonne vers l'extérieur depuis un point central. Par défaut, il forme une ellipse qui s'adapte à la zone de délimitation de l'élément, mais vous pouvez contrôler la forme, la taille et la position. Les dégradés radiaux sont idéaux pour les effets de projecteur, les boutons lumineux et les simulations de lumière d'ambiance.

/* Circular glow from center */
background: radial-gradient(circle, #6366f1 0%, #1e1b4b 100%);

/* Ellipse glow at top-left corner */
background: radial-gradient(ellipse at top left, #fbbf24 0%, transparent 60%);

/* Positioned spotlight */
background: radial-gradient(circle at 30% 40%, #e0f2fe, #0284c7);

3. Le dégradé conique

Un dégradé conique balaie les couleurs autour d'un point central, comme les aiguilles d'une horloge. Cela le rend particulièrement adapté aux camemberts, aux roues chromatiques et aux animations d'indicateurs de chargement. C'était le dernier des trois types de dégradés à obtenir une prise en charge universelle, arrivant dans tous les principaux navigateurs en 2021.

/* Pie chart with three segments */
background: conic-gradient(
  #6366f1 0deg 120deg,
  #ec4899 120deg 240deg,
  #f97316 240deg 360deg
);

/* Color wheel */
background: conic-gradient(
  hsl(0, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(120, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(240, 100%, 50%),
  hsl(300, 100%, 50%),
  hsl(360, 100%, 50%)
);

Comprendre le système d'angles pour les dégradés linéaires

Le paramètre d'angle dans linear-gradient suit une convention qui surprend de nombreux développeurs car elle diffère des angles mathématiques standard. Voici la correspondance :

• 0deg — du bas vers le haut (le dégradé monte vers le haut)
• 90deg — de gauche à droite (le dégradé horizontal le plus courant)
• 135deg — diagonale, du coin supérieur gauche au coin inférieur droit
• 180deg — de haut en bas (identique à la valeur par défaut sans angle spécifié)
• 225deg — diagonale, du coin inférieur droit au coin supérieur gauche
• 270deg — de droite à gauche

Les équivalents en mots-clés — to top, to right, to bottom left — sont souvent plus lisibles que les angles numériques pour les directions courantes. Pour des effets diagonaux précis, les degrés numériques vous donnent un contrôle exact. Le populaire dégradé diagonal violet-vers-indigo utilise 135deg :

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Formes des dégradés radiaux : cercle ou ellipse

Par défaut, radial-gradient produit une ellipse dimensionnée pour s'adapter à l'élément. Vous pouvez la remplacer par deux mots-clés de forme :

• circle — force un cercle parfait quel que soit le rapport d'aspect de l'élément. Utilisez ceci pour les effets lumineux et les arrière-plans en projecteur où vous voulez une atténuation radiale uniforme dans toutes les directions.
• ellipse — la valeur par défaut, s'étire pour s'adapter au conteneur. Utilisez ceci pour des remplissages d'arrière-plan subtils qui doivent s'adapter naturellement à n'importe quelle forme d'élément.

Le mot-clé at vous permet de repositionner le centre du dégradé n'importe où dans l'élément en utilisant n'importe quelle longueur ou pourcentage CSS. at center, at top left, at 20% 80% — tous sont valides. Le positionnement est particulièrement puissant pour créer des effets de lumière d'ambiance décentrés :

/* Glow coming from upper-right corner */
background: radial-gradient(ellipse at top right, rgba(251,191,36,0.4), transparent 60%);

/* Multiple radial gradients layered */
background:
  radial-gradient(circle at 20% 30%, rgba(99,102,241,0.3), transparent 40%),
  radial-gradient(circle at 80% 70%, rgba(236,72,153,0.3), transparent 40%),
  #0f172a;

Les dégradés coniques pour les camemberts et les indicateurs de chargement

La capacité du dégradé conique à balayer en cercle en fait la solution CSS native pour deux composants d'interface classiques qui nécessitaient auparavant du SVG ou du JavaScript :

Pour un anneau de progression, combinez un dégradé conique avec un masque circulaire. Pour un camembert, les segments du dégradé conique correspondent directement aux pourcentages de données. Un segment s'étendant de0deg à 72deg représente exactement 20 % d'un cercle complet. Cela rend la traduction des données en CSS simple — multipliez le pourcentage par 3,6 pour obtenir la valeur en degrés.

Dégradés à plusieurs arrêts et arrêts nets pour les motifs à rayures

Les arrêts de couleur n'ont pas à se fondre en douceur. Lorsque deux arrêts adjacents partagent la même position, la transition entre eux devient instantanée — un arrêt net. Cette technique est la façon de créer des motifs à rayures, des damiers et des arrière-plans à lignes réglées entièrement en CSS :

/* Candy stripe pattern using hard stops */
background: linear-gradient(
  45deg,
  #6366f1 25%,
  transparent 25%,
  transparent 50%,
  #6366f1 50%,
  #6366f1 75%,
  transparent 75%
);
background-size: 40px 40px;

/* Warning stripe — alternating color hard stops */
background: repeating-linear-gradient(
  -45deg,
  #fbbf24,
  #fbbf24 10px,
  #1e293b 10px,
  #1e293b 20px
);

Cas d'usage concrets avec exemples de code

Arrière-plans de sections héros

Un dégradé linéaire à plusieurs arrêts avec un maillage de deux reflets radiaux donne aux sections héros la profondeur d'une illustration personnalisée sans aucun fichier image :

.hero {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.15), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(236,72,153,0.15), transparent 50%),
    linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  min-height: 100vh;
}

Effets de survol des boutons

Les dégradés peuvent être animés au survol à l'aide de l'astuce de background-position — dimensionnez le dégradé à 200 % et décalez sa position au survol :

.btn {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: background-position 0.4s ease;
}
.btn:hover {
  background-position: 100% 50%;
}

Bordures de cartes avec border-image

La propriété border-image accepte un dégradé, ce qui permet des bordures en dégradé sans éléments d'enveloppe ni astuces de pseudo-éléments (pour les arrière-plans unis) :

.card-gradient-border {
  border: 2px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #6366f1, #ec4899) border-box;
}

Barres de progression

Une barre de progression en dégradé communique à la fois la valeur et l'énergie visuelle. Associez-la à une transition de width pour une animation fluide :

.progress-bar {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  width: 73%; /* Controlled by JS or CSS custom property */
  transition: width 0.6s ease;
}

Comparaison des types de dégradés

Conseils pour choisir de bonnes couleurs de dégradé

L'erreur la plus courante lors du choix des couleurs de dégradé est de traverser directement la roue chromatique — par exemple, fondre directement du rouge au vert. Comme le point médian de cette transition passe par un gris-brun boueux, le résultat semble peu attrayant même si les couleurs aux extrémités sont attrayantes individuellement.

La solution est de passer par une teinte intermédiaire plus saturée. Au lieu du rouge-vers-vert directement, essayez rouge → orange → jaune-vert pour une transition vibrante. Vous pouvez aussi rester dans une plage adjacente de teintes — la famille violet-vers-rose, la famille indigo-vers-cyan — qui produisent toujours des résultats nets car le point médian reste saturé.

Quelques recommandations pratiques :

• Maintenez une saturation élevée aux deux extrémités si vous voulez un dégradé vif. Fondre une couleur saturée dans une couleur désaturée crée une zone morte gênante au milieu.
• Fondre différentes valeurs de luminosité (clair vers foncé) au sein de la même famille de teintes paraît presque toujours professionnel et fonctionne bien dans les arrière-plans d'interface.
• Ajoutez un arrêt de couleur intermédiaire à 50 % pour orienter la teinte du point médian — c'est la correction la plus puissante pour les dégradés boueux.
• Limitez les dégradés à deux ou trois arrêts pour la plupart des travaux d'interface. Plus de trois arrêts paraît généralement chaotique, sauf si vous créez intentionnellement un arc-en-ciel ou une visualisation de données.

Accessibilité : du texte sur des dégradés

Utiliser le Générateur de dégradés CSS de BrowseryTools

Le Générateur de dégradés CSS vous donne un aperçu visuel en direct à mesure que vous configurez chaque paramètre. Voici comment l'utiliser efficacement :

• Choisissez le type de dégradé : basculez entre Linéaire, Radial et Conique en haut de l'outil.
• Ajoutez des arrêts de couleur : cliquez sur la barre de dégradé pour ajouter de nouveaux arrêts. Faites glisser les arrêts vers la gauche et la droite pour ajuster leurs positions. Cliquez sur un arrêt pour ouvrir le sélecteur de couleur et changer sa couleur et son opacité.
• Ajustez la direction ou l'angle : pour les dégradés linéaires, faites glisser la roue d'angle ou tapez une valeur précise en degrés. Pour les dégradés radiaux, définissez la forme et la position.
• Prévisualisez en contexte : l'aperçu en direct se met à jour instantanément. Vous pouvez voir exactement à quoi ressemblera votre dégradé avant de copier la moindre ligne.
• Copiez le CSS : cliquez sur le bouton Copier le CSS pour obtenir du CSS prêt pour la production pour la propriété background, prêt à être collé dans n'importe quelle feuille de style ou framework.

Tout s'exécute dans votre navigateur. Aucune définition de dégradé n'est envoyée où que ce soit — c'est un outil purement côté client. Vous pouvez l'utiliser hors ligne une fois la page chargée.

Prise en charge par les navigateurs

Les dégradés CSS sont pris en charge par tous les principaux navigateurs depuis 2014, ce qui les rend sûrs à utiliser sans aucun polyfill ni solution de repli dans pratiquement tous les environnements de production. Les dégradés coniques sont arrivés plus tard mais sont désormais entièrement pris en charge dans Chrome 69+, Firefox 83+, Safari 12.1+ et Edge 79+ — couvrant bien plus de 97 % de l'utilisation mondiale des navigateurs en 2026. Le seul scénario où vous pourriez avoir besoin d'une solution de repli est la prise en charge de très anciennes versions d'Android WebView dans les applications mobiles d'entreprise.