Guide des Dégradés CSS : Motifs Linéaires, Radiaux et Coniques

Les dégradés CSS créent des transitions fluides entre les couleurs sans images, résultant en zéro requête HTTP, une extensibilité infinie et des tailles de fichier minimes. Le CSS moderne supporte trois types de dégradés, chacun avec de puissantes options de configuration. Ce guide les couvre tous avec des exemples pratiques que vous pouvez utiliser immédiatement.

Dégradés Linéaires

Le type le plus courant, transitionnant le long d'une ligne droite :

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

/* Avec un angle */
background: linear-gradient(135deg, #3B82F6, #8B5CF6);

/* Avec des mots-clés de direction */
background: linear-gradient(to right, #3B82F6, #8B5CF6);
background: linear-gradient(to bottom right, #3B82F6, #8B5CF6);

Arrêts de Couleur

Contrôlez où chaque couleur apparaît :

/* Distribution uniforme (par défaut) */
background: linear-gradient(#3B82F6, #8B5CF6, #EC4899);

/* Positions personnalisées */
background: linear-gradient(#3B82F6 0%, #8B5CF6 30%, #EC4899 100%);

/* Arrêt net (pas de transition) */
background: linear-gradient(#3B82F6 50%, #8B5CF6 50%);

Dégradés Multi-Arrêts

Créez des transitions de couleur complexes :

/* Dégradé coucher de soleil */
background: linear-gradient(
  to right,
  #1E3A5F 0%,
  #FF6B35 30%,
  #FFC947 50%,
  #FF6B35 70%,
  #1E3A5F 100%
);

/* Arc-en-ciel */
background: linear-gradient(
  90deg,
  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%)
);

Créez des dégradés linéaires visuellement avec notre Générateur de Dégradés — ajustez les couleurs, angles et arrêts en temps réel.

Dégradés Radiaux

Rayonnent vers l'extérieur depuis un point central :

/* Cercle depuis le centre */
background: radial-gradient(circle, #3B82F6, #1E3A8A);

/* Ellipse (forme par défaut) */
background: radial-gradient(ellipse, #3B82F6, #1E3A8A);

/* Position personnalisée */
background: radial-gradient(circle at top left, #3B82F6, #1E3A8A);
background: radial-gradient(circle at 25% 75%, #3B82F6, #1E3A8A);

Mots-Clés de Taille

/* closest-side : le dégradé atteint le bord le plus proche */
background: radial-gradient(circle closest-side at 25% 50%, #3B82F6, #1E3A8A);

/* farthest-corner : le dégradé atteint le coin le plus éloigné (par défaut) */
background: radial-gradient(circle farthest-corner, #3B82F6, #1E3A8A);

/* Taille explicite */
background: radial-gradient(circle 200px at center, #3B82F6, #1E3A8A);

Dégradés Coniques

Tournent autour d'un point central comme un diagramme circulaire :

/* Conique basique */
background: conic-gradient(#3B82F6, #8B5CF6, #EC4899, #3B82F6);

/* Segments de diagramme */
background: conic-gradient(
  #3B82F6 0deg 120deg,
  #8B5CF6 120deg 240deg,
  #EC4899 240deg 360deg
);

/* Depuis un angle spécifique */
background: conic-gradient(from 45deg, #3B82F6, #8B5CF6, #3B82F6);

/* Centre personnalisé */
background: conic-gradient(from 0deg at 25% 50%, #3B82F6, #8B5CF6, #3B82F6);

Dégradés Répétitifs

Les trois types supportent les motifs répétitifs :

/* Motif rayé */
background: repeating-linear-gradient(
  45deg,
  #3B82F6 0px,
  #3B82F6 10px,
  transparent 10px,
  transparent 20px
);

/* Anneaux concentriques */
background: repeating-radial-gradient(
  circle,
  #3B82F6 0px,
  #3B82F6 5px,
  #1E3A8A 5px,
  #1E3A8A 10px
);

/* Damier (utilisant conique) */
background: repeating-conic-gradient(
  #E5E7EB 0% 25%,
  #F9FAFB 0% 50%
);
background-size: 40px 40px;

Superposition de Dégradés Multiples

CSS supporte les arrière-plans multiples, permettant des effets complexes :

/* Superposition de dégradé sur image */
background:
  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
  url('hero.jpg');

/* Motif en hachures croisées */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  );

Motifs UI Pratiques

Texte en Dégradé

.gradient-text {
  background: linear-gradient(135deg, #3B82F6, #EC4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Bordures en Dégradé

.gradient-border {
  border: 3px solid transparent;
  background-image:
    linear-gradient(white, white),
    linear-gradient(135deg, #3B82F6, #EC4899);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

Arrière-Plan Dégradé Animé

.animated-gradient {
  background: linear-gradient(-45deg, #3B82F6, #8B5CF6, #EC4899, #F59E0B);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Considérations de Performance

Les dégradés sont accélérés par le GPU et performants :

• Les dégradés s'affichent plus vite que les images équivalentes
• background-size affecte le coût de rendu — les tuiles plus petites sont moins coûteuses
• Évitez d'animer directement les couleurs du dégradé — animez plutôt background-position
• Les dégradés complexes avec de nombreux arrêts restent plus rapides que les PNG

Compatibilité Navigateur

Tous les navigateurs modernes supportent les dégradés linéaires, radiaux et coniques. Les dégradés coniques sont les plus récents, supportés depuis 2020 dans tous les navigateurs majeurs (Chrome 69+, Firefox 83+, Safari 12.1+). Aucun préfixe vendeur n'est nécessaire pour aucun type de dégradé.

FAQ

Comment créer un dégradé lisse entre deux couleurs qui paraît boueux ?

Les dégradés boueux surviennent lors de la transition entre des couleurs qui passent par le gris sur le cercle chromatique. Solutions : ajoutez un arrêt de couleur intermédiaire au milieu dans une teinte plus vive, utilisez l'espace colorimétrique oklch (linear-gradient(in oklch, ...)) pour des transitions perceptuellement uniformes, ou augmentez la saturation de la couleur médiane.

Les dégradés peuvent-ils remplacer les images pour les arrière-plans ?

Pour les motifs abstraits, les superpositions et les arrière-plans décoratifs — absolument. Les dégradés ont un temps de chargement nul, s'adaptent parfaitement et ne nécessitent aucune requête HTTP. Pour les visuels complexes ou les photographies, les images restent nécessaires. De nombreux designs modernes combinent les deux : une superposition de dégradé sur une image de fond.

Ressources Connexes

• Générateur de Dégradés — Créez des dégradés CSS visuellement
• Conseils de Design de Palette de Couleurs — Choisissez les couleurs pour vos dégradés
• Les Formats de Couleur Expliqués — Comprenez la notation des couleurs en CSS