repeating-linear-gradient

La fonction CSS repeating-linear-gradient créé une <image> composée de dégradés qui se répètent. Cela fonctionne de manière similaire aux dégradés linéaires simples décrits les mêmes arguments que les dégradés linéaires basiques représentés avec linear-gradient mais les points d'arrêt des couleurs sont automatiquement répétés, indéfiniment, dans les deux directions (les points d'arrêt sont répétés d'autant que la distance qui sépare le premier et le dernier point d'arrêt).

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

Par conséquent, la ligne de la couleur de fin coïncide toujours avec la ligne de la couleur de début. Si les deux ne sont pas identiques, on obtiendra alors une transition abrupte.

Comme pour les autres dégradés, un dégradé linéaire répété n'est pas une couleur (type <color>) CSS mais une image (type <image>) sans dimension intrinsèque ; c'est-à-dire, qu'il n'a ni taille naturelle ni taille préférée. Sa taille réelle s'adapte à l'élément auquel il s'applique.

Syntaxe

/* Un dégradé répétitif sur un axe à 45 degrés */
/* débutant bleu et finissant rouge, répété 3 fois */
repeating-linear-gradient( 45deg, blue, red 33.3% );

/* Un dégradé répétitif allant du coin inférieur droit */
/* à coin supérieur gauche débutant bleu et finissant rouge */
/* et répété tous les 20 pixels */
repeating-linear-gradient( to left top, blue, red 20px);

/* Un dégradé répétitif allant du bas vers le haut, */
/* débutant bleu, étant vert après 40% et finissant rouge */ 
repeating-linear-gradient( 0deg, blue, green 40%, red );

/* Un dégradé répété cinq fois, progressant de gauche à
   droite, commençant en rouge, passant en vert puis à
   nouveau en rouge */
repeating-linear-gradient(to right, red 0%, green 10%, red 20%);

Valeurs

<side-or-corner>

Représente la position du point de départ de la ligne de dégradé. Cette valeur comprends deux mots-clés : le premier indique le côté sur une ligne horizontale, left ou right, le second indique le côté sur une ligne verticale, top ou bottom. L'ordre n'a pas d'influence et chacun des mots-clés est optionnel.
Les valeurs to top, to bottom, to left et to right sont respectivement traduites vers les angles 0deg, 180deg, 270deg, 90deg. Les autres sont traduites vers des angles qui permettent au point de départ d'être dans le même quadrant que le coin décrit et que la ligne définie par le point de départ et le coin soit perpendiculaire à la ligne de dégradé. De cette manière, la couleur décrite par le point d'arrêt sera exactement celle du coin. Ceci est parfois appelé la propriété du « coin magique ». Le point de fin de la ligne de dégradé est le point symétrique de du point de départ dans l'autre direction par rapport au centre de la boîte.

<angle>

Un angle pour la direction du dégradé. L'angle démarre à 0deg (ce qui est équivalent à to top) et progresse dans le sens des aiguilles d'une montre. Voir <angle>.

<linear-color-stop>

Cette valeur est composée d'une valeur de  couleur (type <color>), suivie d'une position d'arrêt optionnelle (soit un pourcentage entre 0% et 100% ou une longueur (type <length>) mesurée le long de l'axe du dégradé).

<color-hint>

L'indication de couleur est une indication pour l'interpolation des couleurs le long du dégradé et entre deux points d'arrêt de couleur. La longueur définit l'emplacement où la transition entre les deux couleurs est appliquée à moitié. Si cette valeur est absente, le niveau intermédiaire de la transition se situera à équidistance des deux points d'arrêt de couleur.

Le rendu des points d'arrêt en CSS suit les mêmes règles que les dégradés en SVG.

Syntaxe formelle

repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
                            \---------------------------------/ \---------------/
                              Définition de la ligne du dégradé Liste des points d'arrêt

où <side-or-corner> = [left | right] || [top | bottom]
  et <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
  et <linear-color-stop> = <color> [ <color-stop-length> ]?
  et <color-stop-length> = [ <percentage> | <length> ]{1,2}
  et <color-hint> = [ <percentage> | <length> ]

Exemples

Bandes zébrées

body {
  width: 100vw;
  height: 100vh;
}

body {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 20px,
      black 20px,
      black 40px);
  /* avec plusieurs longueurs pour les points d'arrêt */
  background-image: repeating-linear-gradient(-45deg, 
      transparent 0 20px, 
      black 20px 40px);
}

Dix barres horizontales répétées

body {
  width: 100vw;
  height: 100vh;
}

body {
  background-image: repeating-linear-gradient(to bottom,
      rgb(26,198,204),
      rgb(26,198,204) 7%,
      rgb(100,100,100) 10%);
}

Comme le dernier point d'arrêt est situé à 10% et que le dégradé est vertical, chaque dégradé occupera 10% de la hauteur et on aura donc au total dix barres horizontales.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Manipuler les dégradés CSS
• Les propriétés liées aux dégradés :
  • radial-gradient(),
  • linear-gradient(),
  • repeating-radial-gradient()
  • conic-gradient
  • repeating-conic-gradient
• Les propriétés où ces fonctions peuvent être utilisées :
  • background-image,background.
• Un dégradé CSS interactif
• <image>
• image()
• element()
• image-set()
• cross-fade