Apprends Dégradés

Introduction aux dégradés CSS

Un dégradé CSS est une transition fluide entre deux ou plusieurs couleurs. Les dégradés sont générés comme des images, ce qui signifie qu'ils sont définis en utilisant la propriété background-image (ou le raccourci background), et non background-color.

Il existe trois types principaux de dégradés :

linear-gradient() — Les couleurs transitionnent le long d'une ligne droite (de haut en bas, de gauche à droite, ou selon n'importe quel angle).
radial-gradient() — Les couleurs rayonnent vers l'extérieur depuis un point central sous forme circulaire ou elliptique.
conic-gradient() — Les couleurs transitionnent autour d'un point central comme un cercle chromatique.

Chaque type a aussi une variante répétée : repeating-linear-gradient(), repeating-radial-gradient(), et repeating-conic-gradient().

Les dégradés sont puissants car ils créent des arrière-plans visuellement riches sans aucun fichier image, résultant en des temps de chargement plus rapides et une évolutivité infinie.

Syntaxe du dégradé linéaire

html

<style>
  .gradient-down {
    /* Par défaut : de haut en bas */
    background-image: linear-gradient(#3498db, #2ecc71);
    height: 80px;
    margin-bottom: 12px;
  }

  .gradient-right {
    /* De gauche à droite */
    background-image: linear-gradient(to right, #e74c3c, #f39c12);
    height: 80px;
    margin-bottom: 12px;
  }

  .gradient-angle {
    /* Angle de 45 degrés avec trois stops de couleur */
    background-image: linear-gradient(45deg, #9b59b6, #3498db, #2ecc71);
    height: 80px;
    margin-bottom: 12px;
  }

  .gradient-stops {
    /* Stops de couleur à des positions spécifiques */
    background-image: linear-gradient(
      to right,
      #e74c3c 0%,
      #e74c3c 33%,
      #f39c12 33%,
      #f39c12 66%,
      #2ecc71 66%,
      #2ecc71 100%
    );
    height: 80px;
  }

  div { color: white; padding: 8px; font-weight: bold; }
</style>

<div class="gradient-down">De haut en bas</div>
<div class="gradient-right">De gauche à droite</div>
<div class="gradient-angle">45deg avec 3 couleurs</div>
<div class="gradient-stops">Stops de couleur nets (rayures)</div>

Dégradés radiaux, coniques et répétés

Dégradé radial

Un dégradé radial rayonne depuis un point central vers l'extérieur :

css

/* Par défaut : ellipse depuis le centre */
background-image: radial-gradient(#3498db, #2c3e50);

/* Forme circulaire depuis le coin supérieur gauche */
background-image: radial-gradient(circle at top left, #3498db, #2c3e50);

Dégradé conique

Un dégradé conique fait transitionner les couleurs autour d'un point central :

css

/* Effet de cercle chromatique */
background-image: conic-gradient(red, yellow, green, blue, red);

/* Diagramme circulaire */
background-image: conic-gradient(#e74c3c 0% 40%, #3498db 40% 70%, #2ecc71 70% 100%);

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

Les dégradés répétés créent un motif de dégradé en mosaïque :

css

/* Motif à rayures */
background-image: repeating-linear-gradient(
  45deg,
  #f0f0f0,
  #f0f0f0 10px,
  #ddd 10px,
  #ddd 20px
);

Cela crée des rayures diagonales qui se répètent tous les 20px.

Dégradés