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.

Note : Le type <gradient> est un sous-type du type  <image>. À ce titre, repeating-linear-gradient() ne fonctionnera pas pour background-color et les autres propriétés qui utilisent le type de données <color>.

Syntaxe

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

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

/* 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 ); 

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>.
<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> [, <color-stop>]+ )
                            \---------------------------------/ \----------------------------/
                              Définition de la ligne de dégradé         Liste des points d'arrêt 

where <side-or-corner> = [left | right] || [top | bottom]
   and <color-stop>     = <color> [ <percentage> | <length> ]?

Exemples

Bandes zébrées

CSS

body {
  width: 100vw;
  height: 100vh;
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 20px,
      black 20px,
      black 40px);
}

Résultat

Barres horizontales répétées

CSS

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

Résultat

Spécifications

Spécification État Commentaires
CSS Images Module Level 3
La définition de 'repeating-linear-gradient()' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 26
Support complet 26
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12Firefox Support complet 16
Notes
Support complet 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Support complet 3.6
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 10
Notes
Support complet 10
Notes
Notes Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().
Opera Support complet 12.1
Support complet 12.1
Aucun support 11 — 15
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Support complet 15
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Safari Support complet 6.1
Support complet 6.1
Support complet 5.1
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Safari 4 was supporting an experimental -webkit-gradient(linear,…) function. It is more limited than the later standard version: you cannot specify both a position and an angle like in repeating-linear-gradient(). This old outdated syntax is still supported for compatibility purposes.
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
WebView Android Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet OuiFirefox Android Support complet 16
Notes
Support complet 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Support complet 4
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet Oui
Support complet Oui
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet OuiSamsung Internet Android Support complet Oui
to keywordChrome Support complet 26Edge Support complet 12Firefox Support complet 10IE Support complet 10Opera Support complet 12.1Safari Support complet 6.1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 10Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
Interpolation Hints / Gradient MidpointsChrome Support complet 40Edge Aucun support NonFirefox Support complet 36IE Aucun support NonOpera Support complet 27Safari Support complet 6.1WebView Android Support complet 40Chrome Android Support complet 40Edge Mobile Aucun support NonFirefox Android Support complet 36Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
Unitless 0 for <angle>Chrome Support complet 26Edge Support complet 12Firefox Support complet 55
Support complet 55
Support partiel 46
Notes
Notes Accepted only in -webkit-repeating-linear-gradient() and -moz-repeating-linear-gradient(), not repeating-linear-gradient().
IE Aucun support NonOpera Support complet 16Safari Support complet 6.1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet 55
Support complet 55
Support partiel 46
Notes
Notes Accepted only in -webkit-repeating-linear-gradient() and -moz-repeating-linear-gradient(), not repeating-linear-gradient().
Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, Sebastianz, Prinz_Rana, wizAmit, prayash, bfn, teoli, FredB
Dernière mise à jour par : SphinxKnight,