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).

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 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

repeating-linear-gradient( 45deg, blue, red );           /* Un dégradé répétitif sur un axe à 45 degrés débutant bleu et finissant rouge */
repeating-linear-gradient( to left top, blue, red);      /* Un dégradé répétitif allant du coin inférieur droit àau coin supérieur gauche
                                                            débutant bleu et finissant rouge */

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

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 à top et progresse dans le sens des aiguilles d'une montre. Voir <angle>.

<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é).
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> )
où 
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>{2,}
où 
<color-stop> = <color> <length-percentage>?
où 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<length-percentage> = <length> | <percentage>
où 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
où 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

Exemples

CSS

#grad1 {
  background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
}

#grad2 {
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
}

HTML

<ol>
  <li>Dégradé répété
    <div id="grad1"></div>
  </li>
  <li>Motif zébré
    <div id="grad2"></div>
  </li>
</ol>

Résultat

Spécifications

Compatibilité des navigateurs

[1] Internet Explorer 5.5 jusqu'à 9.0 prend en charge le filtre propriétaire filter: progid:DXImageTransform.Microsoft.Gradient().

[2] Depuis la version 528, WebKit prend en charge la fonction -webkit-gradient(linear,…). À partir of WebKit 534.16, il prend en charge la syntaxe de dégradé standard. À la différence de Gecko, on ne peut pas définir à la fois un angle et une position en même temps avec -webkit-linear-gradient(). On peut toutefois obtenir le même effet en décalant les points d'arrêt.

[3] Gecko, Opera & Webkit considèrent qu'un <angle> commence à partir de la droite et non à partir du top. Autrement dit, pour ces navigateurs, un angle 0deg pointe vers la droite. Selon la dernière version de la spécification, un angle de 0deg pointe vers le haut. Depuis Firefox 42, la version préfixée des dégradés peut être désactivée en plaçant la préférence layout.css.prefixes.gradients avec false.

[4] Firefox 3.6 et Opera 11.10 ont implémenté une version préfixée d'une ancienne syntaxe où le coin de départ ou la ligne de départ était indiquée sans le mot-clé to et était considéré comme une position from. La syntaxe avec to a été ajoutée dans Firefox 10 et Opera 11.60. Au début la syntaxe dépréciée a été retirée mais il est aisé de passer de l'un à l'autre :

-moz-repeating-linear-gradient(to top left, blue, red);

sera synonyme de :

-moz-repeating-linear-gradient(bottom right, blue, red);

La syntaxe historique, sans to, disparaîtra avec le préfixe.

[5] Avant Firefox 36, Gecko n'appliquait pas les dégradés sur les espaces de couleurs pré-multipliées ce qui entraînait des tons de gris lorsqu'on utilisait la transparence.

[6] WebKit bug 1074056.

[7] En plus de la version non-préfixée, Gecko 44.0 ((Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41)) a ajouté la prise en charge d'une version préfixée avec -webkit pour des raisons de compatibilité web via la préférence layout.css.prefixes.webkit qui valait false par défaut. Depuis Gecko 49.0 ((Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46)), la préférence est activée par défaut.

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()
• Les propriétés où ces fonctions peuvent être utilisées :
  • background-image,background.
• Un dégradé CSS interactif