CSS Graduants Écriture et débogage sans supposition

Les gradients CSS sont l'un de ces éléments qui semblent simples jusqu'à ce que vous regardiez un morceau marron mouvant où vous attendiez un passage net du bleu au violet. La syntaxe a des particularités, le chemin de débogage est opaque, et la plupart des tutoriels s'arrêtent juste avant que les problèmes ne commencent.

Ceci est une référence pratique. Chaque concept est accompagné de code fonctionnel. Ouvrez une générateur de gradients CSS dans une autre onglet — vous voudrez expérimenter tout en lisant.

Les trois types — et quand les utiliser

linear-gradient s'applique à tout ce qui est directionnel : fonds d'accueil, remplissage des boutons, séparateurs.

background: linear-gradient(135deg, #6366f1, #8b5cf6);

radial-gradient s'étend à partir d'un point central — idéal pour les effets de projecteur, les éclairs et les éléments UI circulaires.

background: radial-gradient(circle at 30% 40%, #f59e0b, #ef4444);

conic-gradient s'élargit autour d'un angle central — le bon choix pour les camemberts, les indicateurs de chargement et les rouages de couleur.

background: conic-gradient(from 90deg, #3b82f6, #8b5cf6, #3b82f6);

Règle de base : si le passage suit une direction, utilisez linear. Si cela s'étend, utilisez radial. Si cela tourne, utilisez conic.

Analyse de la syntaxe : les parties qui dérangent les utilisateurs

La source la plus fréquente de confusion est la direction versus l'angle. to right et 90deg les deux produisent un gradient de gauche à droite, mais ils diffèrent dans la manière dont ils gèrent les éléments non carrés. Utilisez les directions par mot-clé (to right, to bottom right) lorsque vous souhaitez que le gradient s'adapte à la forme de l'élément. Utilisez des valeurs en degrés lorsque vous avez besoin de contrôle précis.

Points de couleur sont des points où la précision est essentielle :

/* Even distribution — browser figures out spacing */
background: linear-gradient(to right, #f97316, #8b5cf6);

/* Explicit stops */
background: linear-gradient(to right, #f97316 0%, #f97316 30%, #8b5cf6 60%, #8b5cf6 100%);

La version deux maintient un orange solide pendant 30%, puis passe au violet. Sans positions explicites, vous obtenez un mélange lisse et uniforme.

Vous pouvez également forcer une frontière de couleur rigide — utile pour les motifs en bandes :

/* Hard mid-stop: sharp color transition at 50% */
background: linear-gradient(to right, #3b82f6 50%, #ef4444 50%);

Problèmes courants et ce qui les cause réellement

Bande — des bandes visibles au lieu d'un gradient fluide — apparaissent généralement avec des transitions à faible contraste ou entre des couleurs sombres. L'ajout d'un point intermédiaire subtil et le décalage légèrement des couleurs peuvent souvent y remédier :

/* Before — banding prone */
background: linear-gradient(180deg, #1e1b4b, #312e81);

/* After — add a mid nudge */
background: linear-gradient(180deg, #1e1b4b 0%, #2e2b6e 50%, #312e81 100%);

Les couleurs ne se mélangent pas correctement — le violet devient brun entre le rouge et le bleu — est un problème connu lié à l'espace de couleur sRGB. Le niveau 4 des couleurs CSS a introduit in oklab l'interpolation, qui mélange dans l'espace de couleur perçu :

/* Modern — cleaner blends */
background: linear-gradient(in oklab to right, #ef4444, #3b82f6);

L'assistance des navigateurs est solide en 2026. Si vous avez besoin de couverture pour les anciens navigateurs, gardez le gradient standard comme fallback au-dessus.

Les gradients coniques dans les anciens WebKit: ajoutez un fond solide comme fallback pour les utilisations fonctionnelles — camemberts, indicateurs de progression — puisque les échecs décoratifs sont acceptables, mais les interfaces cassées ne le sont pas :

.pie {
  background: #6366f1; /* fallback */
  background: conic-gradient(#6366f1 var(--pct), #e5e7eb var(--pct));
}

Superposition de gradients

Les fonds CSS acceptent plusieurs valeurs — les gradients se superposent comme des couches, de haut en bas dans l'ordre de déclaration :

background:
  linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
  radial-gradient(ellipse at 20% 80%, #6366f1 0%, transparent 60%),
  radial-gradient(ellipse at 80% 20%, #f59e0b 0%, transparent 60%),
  #0f172a;

La couche sombre se trouve en haut, deux éclairs se trouvent en dessous, et un fond solide se situe en bas. Ce modèle est courant pour les sections d'accueil nécessitant une profondeur sans charger une image.

Une contrainte : les couches de gradients avec rgba ou des arrêts transparents interagissent avec ce qui se trouve en dessous dans la même background pile, et non avec le fond de page. Planifiez votre ordre de couches en conséquence.

Les variables CSS rendent les gradients themables

Les valeurs de couleur fixes dans les gradients brisent les systèmes de thèmes. Définissez les points de couleur comme des variables :

:root {
  --gradient-start: #6366f1;
  --gradient-end: #8b5cf6;
  --gradient-angle: 135deg;
}

.card {
  background: linear-gradient(var(--gradient-angle), var(--gradient-start), var(--gradient-end));
}

[data-theme="warm"] {
  --gradient-start: #f97316;
  --gradient-end: #ef4444;
}

Le passage de thème devient une simple surcharge de variable. Combinez cela avec @property pour activer des gradients animés — sans cela, CSS ne peut pas interpoler entre les valeurs de gradient :

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

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

.animated {
  animation: rotate-gradient 4s linear infinite;
  background: linear-gradient(var(--gradient-angle), #6366f1, #8b5cf6);
}

Performance : quand un gradient coûte plus qu'une image

Les gradients sont rasterisés au moment de la mise à jour par le GPU. Pour les gradients statiques et simples, cela est plus léger qu'une requête HTTP d'une image. Mais les gradients complexes en couches sur des éléments fréquemment mis à jour peuvent créer des goulets d'étranglement.

Surveillez ces modèles :

• Plus de 3 à 4 couches de gradients sur un seul élément
• Les gradients sur position: fixed fond — ils se réactualisent à chaque cadre de scroll
• Les gradients animés sans @property — ces derniers forcent des mises à jour complètes au lieu d'actualisations composées

Profitez dans DevTools → Performance avant d'optimiser. La plupart des utilisations de gradients sont loin de ces limites. Quand vous atteignez un goulet d'étranglement, convertissez vers une image pré-rendue ou passez à @property-basé animation.

Commencez avec le Générateur, terminez dans le code

Le chemin le plus rapide vers un gradient fonctionnel est visuel : utilisez le Générateur de dégradé CSS pour ajuster vos couleurs et positions, puis copiez le résultat dans votre feuille de style. À partir de là, les techniques ci-dessus — extraction de variables, superposition, oklab interpolation — vous permettent d'étendre le gradient à une version prête pour la production sans supposition.

Vous aimerez peut-être aussi