Guide des dégradés CSS : linéaires, radiaux et coniques

Les dégradés CSS permettent de créer des transitions fluides entre deux couleurs ou plus directement dans le navigateur, sans la moindre requête d'image. Introduits dans CSS3 et désormais universellement supportés, les dégradés ont évolué de simples fondus à deux arrêts vers des éléments visuels sophistiqués capables de produire des textures, des motifs géométriques et des effets de profondeur. Ce guide parcourt chaque type de dégradé CSS, explique la syntaxe en détail et présente des exemples pratiques avec des codes hex que vous pouvez directement intégrer dans vos feuilles de style.

Qu'est-ce qu'un dégradé CSS ?

Un dégradé CSS est un type spécial de valeur <image>. Il génère une transition de couleur de façon programmatique, ce qui signifie que le navigateur calcule les couleurs intermédiaires entre vos arrêts de couleur définis. Comme les dégradés sont des images plutôt que des couleurs, vous les appliquez avec background-image ou la propriété raccourcie background — pas background-color.

Les trois types de dégradés en CSS sont :

• linear-gradient() — les couleurs transitent le long d'une ligne droite
• radial-gradient() — les couleurs rayonnent vers l'extérieur depuis un point central
• conic-gradient() — les couleurs tournent autour d'un point central

Chaque type possède également une variante repeating-* (repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient()) qui répète le motif du dégradé sur l'élément.

Dégradés linéaires

Un dégradé linéaire dessine une transition de couleur le long d'une ligne droite à un angle spécifié.

Syntaxe de base

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Le paramètre direction est optionnel. Sans lui, le dégradé va de haut en bas (équivalent à to bottom ou 180deg).

/* De haut en bas (défaut) */
background: linear-gradient(#3B82F6, #1E3A8A);

/* De gauche à droite */
background: linear-gradient(to right, #3B82F6, #1E3A8A);

/* En diagonale */
background: linear-gradient(to bottom right, #3B82F6, #1E3A8A);

Syntaxe des angles

Les angles sont mesurés en degrés dans le sens des aiguilles d'une montre depuis le haut de l'élément. 0deg pointe vers le haut, 90deg pointe vers la droite, 180deg pointe vers le bas.

/* Diagonale à 45 degrés de bas-gauche vers haut-droite */
background: linear-gradient(45deg, #FF6B6B, #FFC300);

/* Diagonale à 135 degrés de haut-gauche vers bas-droite */
background: linear-gradient(135deg, #667EEA, #764BA2);

Un cas d'usage courant est le fond d'une section héros. Par exemple, un dégradé de #667EEA à #764BA2 à 135 degrés produit une diagonale violet foncé qui fonctionne bien derrière un texte blanc.

Mots-clés de direction

Au lieu des angles, vous pouvez utiliser des mots-clés directionnels :

Les mots-clés sont plus lisibles dans les revues de code et s'autodocumentent. Réservez les degrés explicites pour les angles précis qui ne tombent pas sur une diagonale.

Arrêts de couleur multiples

Les arrêts de couleur définissent où chaque couleur commence et se termine le long de la ligne de dégradé. Vous pouvez utiliser n'importe quelle longueur CSS ou pourcentage comme position.

/* Dégradé à trois arrêts */
background: linear-gradient(to right, #FF6B6B, #FFD93D, #6BCB77);

/* Arrêts positionnés */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FFD93D 50%,
  #6BCB77 100%
);

/* Arrêt de couleur dur (sans transition) */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FF6B6B 50%,
  #6BCB77 50%,
  #6BCB77 100%
);

La technique d'arrêt de couleur dur — définir deux arrêts à la même position — crée un bord net entre les couleurs sans mélange. C'est utile pour les designs de type drapeau, les indicateurs de progression ou les arrière-plans en écran partagé.

Indication d'arrêt de couleur

CSS supporte un indicateur de point médian entre deux arrêts de couleur, vous donnant le contrôle sur l'endroit où l'interpolation est la plus rapide ou la plus lente :

/* Le dégradé s'attarde plus longtemps dans la plage bleue */
background: linear-gradient(to right, #3B82F6, 30%, #EF4444);

L'indication 30% indique au navigateur que le point médian de la transition entre le bleu #3B82F6 et le rouge #EF4444 doit se produire à la marque de 30%, faisant durer le bleu et apparaître le rouge rapidement.

Dégradés radiaux

Un dégradé radial émane vers l'extérieur depuis un point central, créant des motifs circulaires ou elliptiques.

Syntaxe de base

background: radial-gradient(shape size at position, color-stop1, color-stop2);

Tous les paramètres sont optionnels. Le défaut produit un dégradé elliptique centré dans l'élément, dimensionné pour atteindre le coin le plus éloigné.

/* Radial simple depuis le centre */
background: radial-gradient(#FFF176, #F57F17);

/* Cercle explicite */
background: radial-gradient(circle, #A8E063, #2D6A4F);

Forme

Les dégradés radiaux peuvent être circle (rayon uniforme) ou ellipse (défaut, s'étire pour s'adapter à l'élément).

/* Cercle : même rayon dans toutes les directions */
background: radial-gradient(circle, #FF9A9E, #A18CD1);

/* Ellipse : s'étire pour s'adapter aux dimensions de l'élément */
background: radial-gradient(ellipse, #FF9A9E, #A18CD1);

Mots-clés de taille

La taille contrôle jusqu'où le dégradé s'étend :

/* Petit spot lumineux en haut à gauche */
background: radial-gradient(circle closest-side at 25% 25%,
  rgba(255,255,255,0.8),
  transparent
);

Position

Le mot-clé at définit le point central du dégradé en utilisant n'importe quelle valeur de position CSS valide :

/* Dégradé décentré pour un effet d'éclairage */
background: radial-gradient(circle at 70% 30%, #FFE066, #FF6B6B, #2D3561);

/* Spot lumineux en bas au centre */
background: radial-gradient(ellipse at 50% 100%, #667EEA, #1a1a2e);

Positionner les dégradés hors centre crée l'apparence d'une source lumineuse, ce qui est une technique courante dans le glassmorphisme et les effets de profondeur.

Dégradés coniques

Un dégradé conique fait tourner les couleurs autour d'un point central, similaire à la façon dont un graphique en camembert est dessiné. Il a été ajouté à CSS plus tard que les autres types mais dispose désormais d'un support complet dans les navigateurs.

Syntaxe de base

background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

/* Dégradé conique de base */
background: conic-gradient(#FF6B6B, #FFD93D, #6BCB77, #4D96FF, #FF6B6B);

/* En commençant à 90 degrés */
background: conic-gradient(from 90deg, #FF6B6B, #FFD93D, #6BCB77);

Graphiques en camembert avec les dégradés coniques

Les dégradés coniques sont idéaux pour les graphiques en camembert en CSS pur :

/* Graphique en camembert : 40% rouge, 35% bleu, 25% vert */
background: conic-gradient(
  #EF4444 0deg 144deg,
  #3B82F6 144deg 270deg,
  #22C55E 270deg 360deg
);
border-radius: 50%;

Le calcul est simple : multiplier le pourcentage par 3,6 pour obtenir les degrés (40% × 3,6 = 144deg).

Roues de couleurs avec les dégradés coniques

Un dégradé conique complet parcourant toutes les teintes recrée une roue de couleurs :

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%)
);
border-radius: 50%;

Motifs en damier et en bandes

La variante repeating-conic-gradient() crée des motifs géométriques :

/* Damier */
background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%);
background-size: 40px 40px;

Dégradés répétés

Chaque type de dégradé a une variante répétée qui répète le motif défini en continu :

/* Bandes diagonales */
background: repeating-linear-gradient(
  45deg,
  #F3F4F6,
  #F3F4F6 10px,
  #E5E7EB 10px,
  #E5E7EB 20px
);

/* Anneaux concentriques */
background: repeating-radial-gradient(
  circle,
  #3B82F6,
  #3B82F6 10px,
  transparent 10px,
  transparent 30px
);

Les dégradés répétés sont efficaces pour les effets de texture — des lignes diagonales de type filigrane sur les fonds, ou des anneaux concentriques pour une esthétique de réticule de visée.

Transparence dans les dégradés

Utiliser des valeurs transparent ou rgba() dans les dégradés crée des effets d'apparition et de disparition progressive :

/* Fondu en bas (le contenu en dessous reste visible) */
background: linear-gradient(to bottom,
  #1E3A8A 0%,
  rgba(30, 58, 138, 0) 100%
);

/* Superposition vignette */
background: radial-gradient(ellipse at center,
  transparent 60%,
  rgba(0, 0, 0, 0.5) 100%
);

Notez que transparent en CSS équivaut à rgba(0,0,0,0) — noir entièrement transparent — ce qui peut produire des bandes grises inattendues lors de la transition depuis une valeur colorée. Pour éviter cela, utilisez la version entièrement transparente de votre couleur :

/* Correct : version transparente du bleu */
background: linear-gradient(to right, #3B82F6, rgba(59, 130, 246, 0));

/* Incorrect : introduit des bandes grises */
background: linear-gradient(to right, #3B82F6, transparent);

Superposition de plusieurs dégradés

La propriété background accepte plusieurs valeurs séparées par des virgules. Chaque dégradé est empilé au-dessus du précédent :

/* Superposition diagonale sur une couleur unie */
background:
  linear-gradient(135deg, rgba(255,107,107,0.3) 0%, transparent 50%),
  linear-gradient(to bottom, #1E3A8A, #2D6A9F);

/* Simulation de texture de bruit avec des dégradés */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  ),
  linear-gradient(135deg, #667EEA, #764BA2);

Les dégradés superposés réduisent les requêtes HTTP qui nécessiteraient autrement plusieurs images de fond, tout en vous donnant un contrôle CSS complet sur les couleurs et les dimensions.

Performance des dégradés CSS

Les dégradés sont calculés par le GPU et sont généralement efficaces. Cependant, quelques schémas méritent d'être évités dans les contextes sensibles aux performances :

• Dégradés animés : CSS ne peut pas faire une transition entre deux valeurs background-image différentes. Animer les dégradés nécessite soit de modifier des propriétés personnalisées CSS (variables), soit d'utiliser JavaScript. Une solution de contournement consiste à animer background-position sur un dégradé plus grand.
• Motifs répétés complexes : des tailles de répétition très petites (en dessous de 2px) sur de grands éléments obligent le navigateur à calculer des milliers de pixels de dégradé, ce qui peut causer des problèmes de performance de peinture.
• Évitez filter: blur() sur les fonds dégradés pendant l'animation — c'est coûteux en GPU et provoque des saccades.

Pour l'animation de dégradés, utiliser des propriétés personnalisées CSS avec @property fournit des transitions fluides accélérées par le matériel :

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.animated-gradient {
  background: linear-gradient(var(--gradient-angle), #667EEA, #764BA2);
  animation: rotate-gradient 4s linear infinite;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

Utiliser le générateur de dégradés

Bien qu'écrire des dégradés à la main soit précieux pour comprendre la syntaxe, le Générateur de dégradés accélère considérablement le processus. Vous pouvez :

• Choisir les couleurs de début et de fin à l'aide d'un sélecteur de couleurs visuel ou en saisissant directement des codes hex
• Définir l'angle du dégradé avec un curseur ou une entrée numérique
• Ajouter plusieurs arrêts de couleur à des positions précises
• Prévisualiser le dégradé en temps réel sur différentes tailles d'éléments
• Copier le CSS final en un seul clic

Par exemple, pour construire un dégradé de coucher de soleil, saisissez #FF6B6B comme couleur de début, #FFC300 à 50%, et #FF3C00 comme fin, puis définissez l'angle à 135 degrés. Le générateur produit un CSS prêt à l'emploi que vous pouvez coller directement dans votre feuille de style.

Associez le générateur au Convertisseur de couleurs lorsque vous avez besoin de travailler avec des valeurs HSL ou OKLCH plutôt qu'en hex — les espaces colorimétriques modernes comme OKLCH produisent des dégradés plus uniformes perceptuellement car l'axe de luminosité est véritablement uniforme sur toutes les teintes.

Recettes de dégradés pratiques

Fond de section héros

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

Diagonale violet-bleu profond, adaptée aux pages de destination SaaS.

Effet de survol de carte

background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

Dégradé subtil bleu-gris clair de #F5F7FA à #C3CFE2.

Bouton à effet néon

background: linear-gradient(to right, #11998e, #38ef7d);
box-shadow: 0 4px 15px rgba(56, 239, 125, 0.4);

Vert vibrant de #11998E à #38EF7D.

Surface en mode sombre

background: linear-gradient(145deg, #1E1E2E 0%, #2D2D44 100%);

Violet-bleu sombre subtil pour les surfaces de cartes en mode sombre.

Dégradé de maillage (approximé avec des couches)

background:
  radial-gradient(ellipse at 20% 20%, rgba(103,126,234,0.5), transparent 50%),
  radial-gradient(ellipse at 80% 80%, rgba(118,75,162,0.5), transparent 50%),
  radial-gradient(ellipse at 50% 50%, rgba(255,107,107,0.3), transparent 60%),
  #1a1a2e;

Points clés à retenir

• CSS offre trois types de dégradés : linear-gradient() pour les transitions en ligne droite, radial-gradient() pour les motifs circulaires ou elliptiques, et conic-gradient() pour les rotations de style camembert autour d'un point central.
• Chaque type a une variante repeating-* qui répète le motif du dégradé, utile pour les effets de texture, les bandes et les motifs géométriques.
• Plusieurs arrêts de couleur avec des positions en pourcentage ou en pixels donnent un contrôle précis sur l'endroit où les transitions se produisent ; utiliser la même position pour deux arrêts crée un bord net sans mélange.
• Utilisez rgba() avec un alpha à zéro (pas le mot-clé transparent nu) pour éviter les bandes grises lors du fondu d'une couleur vers la transparence.
• Plusieurs dégradés peuvent être superposés dans une seule déclaration background, chaque dégradé étant positionné au-dessus du précédent.
• Le Générateur de dégradés vous permet de construire des dégradés complexes visuellement, avec une prévisualisation en temps réel et un export CSS en un clic.