Les dégradés de couleurs en CSS3 (gradient)

Les dégradés CSS permettent de créer des transitions de couleurs fluides sans la moindre image externe. Tout est calculé par le navigateur, ce qui garantit une netteté parfaite à toutes les résolutions et un poids nul à télécharger. Cet article fait le tour des trois familles de dégradés, linear-gradient, radial-gradient et conic-gradient, puis explore les points d\'arrêt et les motifs répétés.

Le dégradé linéaire

Le dégradé linéaire fait progresser une ou plusieurs couleurs le long d\'une ligne droite. C\'est le plus courant et le plus simple à comprendre. Un point essentiel à retenir : un dégradé n\'est pas une couleur, c\'est une image générée. On l\'applique donc avec background-image (ou la propriété raccourcie background), jamais avec background-color.

La direction se définit de deux manières. Avec des mots-clés comme to right, to bottom ou to bottom right, ou bien en degrés, où 0deg pointe vers le haut et où l\'angle tourne dans le sens horaire.

.banniere {
  /* du bleu à gauche vers le violet à droite */
  background-image: linear-gradient(to right, #2563eb, #7c3aed);
}

.diagonale {
  /* angle précis de 135 degrés */
  background-image: linear-gradient(135deg, #06b6d4, #3b82f6);
}

Sans direction explicite, le dégradé part du haut vers le bas par défaut. On peut empiler autant de couleurs que l\'on veut, séparées par des virgules, et elles se répartiront automatiquement à intervalles réguliers.

Le dégradé radial

Le dégradé radial rayonne depuis un point central vers l\'extérieur, comme une source lumineuse. La première couleur occupe le cœur, la dernière atteint le bord. On contrôle la forme avec les mots-clés circle ou ellipse, et la position du centre avec at suivi de coordonnées.

.halo {
  /* cercle centré, du blanc vers le gris */
  background-image: radial-gradient(circle, #ffffff, #94a3b8);
}

.projecteur {
  /* ellipse positionnée en haut à gauche */
  background-image: radial-gradient(ellipse at top left, #fde047, #ea580c);
}

Par défaut, la forme est une ellipse centrée qui épouse les proportions de l\'élément. Le mot-clé circle force un cercle parfait, utile pour des boutons ronds ou des effets de lueur. On peut aussi préciser la taille avec des mots-clés comme closest-side ou farthest-corner pour contrôler où la dernière couleur se termine.

Le dégradé conique

Le dégradé conique fait tourner les couleurs autour d\'un point central, comme les aiguilles d\'une horloge. Contrairement au radial qui s\'éloigne du centre, le conique balaie un cercle. C\'est l\'outil idéal pour les graphiques en camembert et les roues de couleur. Il est aujourd\'hui largement supporté par tous les navigateurs courants.

.camembert {
  border-radius: 50%;
  background-image: conic-gradient(
    #ef4444 0% 25%,
    #22c55e 25% 60%,
    #3b82f6 60% 100%
  );
}

.roue-couleur {
  border-radius: 50%;
  background-image: conic-gradient(
    red, yellow, lime, aqua, blue, magenta, red
  );
}

En indiquant deux pourcentages par couleur (un début et une fin), on obtient des secteurs nets parfaits pour un camembert. La roue de couleur, elle, enchaîne les teintes sans rupture. On peut décaler le point de départ avec from 90deg et déplacer le centre avec at, exactement comme pour le radial.

Les points d\'arrêt avancés

Chaque couleur d\'un dégradé possède un point d\'arrêt (color stop), une position exprimée en pourcentage ou en pixels. C\'est là que se joue la finesse. En jouant sur ces positions, on passe d\'une transition douce à une bande franche.

L\'astuce clé : si deux couleurs partagent exactement la même position, la transition devient instantanée. On crée ainsi des rayures nettes sans aucun flou.

.bandes {
  /* trois bandes pleines, sans transition */
  background-image: linear-gradient(
    to right,
    #2563eb 0% 33%,
    #f59e0b 33% 66%,
    #10b981 66% 100%
  );
}

.transition-controlee {
  /* le dégradé ne commence qu\'à 40% et finit à 80% */
  background-image: linear-gradient(#fef3c7 40%, #d97706 80%);
}

Cette technique des arrêts collés est la base de tous les motifs géométriques en CSS. Combinée aux dégradés répétés, elle ouvre la porte aux rayures, damiers et chevrons. Pour donner du relief à ces blocs colorés, pensez aussi à les ombres box-shadow.

Les dégradés répétés

Les fonctions repeating-linear-gradient et repeating-radial-gradient répètent un motif à l\'infini. Au lieu d\'étirer le dégradé sur toute la surface, le navigateur reproduit en boucle le segment défini par les points d\'arrêt. Idéal pour des rayures régulières ou des fonds texturés.

.rayures {
  background-image: repeating-linear-gradient(
    45deg,
    #e2e8f0 0 10px,
    #cbd5e1 10px 20px
  );
}

.cibles {
  background-image: repeating-radial-gradient(
    circle,
    #1e293b 0 12px,
    #334155 12px 24px
  );
}

Le principe est simple : on définit un cycle court (ici 20 pixels au total pour les rayures), et CSS le duplique sur toute la zone. En modifiant l\'angle, l\'épaisseur des bandes ou les couleurs, on obtient une infinité de motifs sans le moindre fichier image. C\'est léger, net et entièrement adaptable.

Astuces pratiques

Voici quelques techniques qui transforment de simples dégradés en effets professionnels.

• Superposer plusieurs dégradés : la propriété background-image accepte une liste séparée par des virgules. Le premier dégradé déclaré passe au-dessus des suivants. Utilisez des couleurs semi-transparentes (rgba) pour laisser voir les couches inférieures.
• Overlay sur une image : combinez un dégradé translucide et une photo dans la même déclaration pour assombrir un fond et garder un texte lisible.
• Boutons modernes : un dégradé diagonal subtil donne du volume sans surcharger.
• Performance : un dégradé CSS est plus léger qu\'une image et reste net à tout zoom, mais évitez d\'animer trop de dégradés complexes simultanément.

.heros {
  /* un voile sombre par-dessus une photo */
  background-image:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url("/img/montagne.jpg");
  background-size: cover;
  color: #ffffff;
}

.bouton {
  background-image: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  color: #fff;
}

Avec ces six fonctions et la maîtrise des points d\'arrêt, vous couvrez l\'immense majorité des besoins graphiques d\'une interface. Les dégradés sont gratuits en bande passante, infiniment redimensionnables et modifiables en une ligne. Un réflexe à adopter avant de charger la moindre image de fond.