Repeating-linear-gradient() - Fonction CSS

repeating-linear-gradient()

Résumé des caractéristiques de la fonction repeating-linear-gradient()

Description rapide
Détermine un dégradé de couleur linéaire et le répète sur toute la surface de l'élément.
Statut
Standard
Pourcentages
Calculés par rapport à la longueur de la ligne de dégradé.
Module W3C
Module CSS - Images
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: CR (document candidat à la recommandation)

Description de la fonction repeating-linear-gradient().

La fonction repeating-linear-gradient() définit un dégradé de couleurs linéaire répété sur toute la surface de l'élément. Ce dégradé peut être substitué à une image dans toutes les propriétés qui attendent une image mais son utilisation est surtout fréquente avec background-image.

Pour que la répétition se déclenche, le dégradé doit être dimensionné, et d'une taille inférieure à celle de l'élément sur lequel on l'applique.

Reportez-vous au tutoriel sur les dégradés de couleurs pour une présentation générale des dégradés en CSS.

La valeur repeating-linear-gradient() peut être utilisée avec les propriétés suivantes :

  • background-image : Définit l'image ou dégradé d'arrière-plan (plusieurs images ou dégradés peuvent coexister).
  • border-image-source : Définit l'image utilisée pour construire la bordure.
  • image-set() : Propose au navigateur un choix d'images afin que ce dernier puisse choisir celle qui est le plus adapté (résolution, format...).
  • list-style-image : Définit une image personnalisée à utiliser à la place des puces, dans le contexte d'une énumération sous forme de liste.
  • mask-image : Désigne l'image ou le fichier SVG qui sera utilisé comme masque.

Syntaxes de la fonction repeating-linear-gradient().

  • background: linear-gradient(90deg,blue 0%, pink 10%, ..., blue 20%); a c1 p1 c2 p2 cn pn

    Ceci est un exemple de syntaxe pour la fonction repeating-linear-gradient(). Reportez-vous à sa petite sœur, la fonction sans répétition linear-gradient() pour consulter toutes les variantes de syntaxe.

Exemples d'utilisation de la fonction repeating-linear-gradient().

Cliquez sur les exemples pour afficher le CSS correspondant.

Toiture en tuiles
Une barrière : association de deux dégradés, un horizontal, avec répétition, comportant des parties transparentes, et un deuxième dégradé sans répétition, et dans le sens vertical.
Torchon de cuisine (motif "Vichy")
Ce motif très connu, souvent utilisé dans le linge de maison, peut être obtenu en croisant deux dégradés avec répétition.
Hachures : un simple dégradé entre noir et blanc, répété avec une orientation de -45 degrés.
Bordures en dégradé : utilisation d'un dégradé avec répétition sur la bordure avec la propriété border-image.

Simulateur avec la fonction repeating-linear-gradient()

background-image :

Support de la fonction repeating-linear-gradient().

Le tableau de compatibilité ci-dessous présente la prise en charge par les navigateurs des dégradés, des dégradés répétitifs, et le bon traitement de la fonction repeating-linear-gradient()

Colonne 1
Prise en charge des dégradés linéaire ou radial.
Colonne 2
Capacité des navigateurs à tracer des dégradés linéaires coniques ou radiaux.
Colonne 3
Support de la fonction repeating-linear-gradient() qui définit un dégradé linéaire et répétitif.
1
Dégradés
linéaires
2
Dégradés
répétitifs
3
Fonction
repeating-linear-gradient()
Estimation de la prise en charge globale.
96%
97%
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Chrome pour Androïd

Opéra

Safari

Firefox

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse
Caniuse

Historique de la fonction repeating-linear-gradient().

  • Module CSS - Image niveau 3

    Introduction des dégradés linéaires, et première définition des fonctions linear-gradient() et repeating-linear-gradient().
    WD
    23 Juillet 2009
    Document de travail.
    CR
    17 Avril 2012
    Candidat à la recommandation.
    PR
    REC

  • Module CSS - Images et contenu remplacé

    Les fonctions de dégradés permettent de spécifier l'espace de couleur à utiliser pour calculer l'interpolation des couleurs.
    WD
    11 Septembre 2012
    Document de travail.
    CR
    PR
    REC

Voir aussi : autres manipulations d'images.

Les dégradés de couleurs sont décrits dans la spécification du W3C relative aux images (CSS Images Module). Pour faciliter vos recherches, voici d'autres termes décrit dans cette même norme.

Propriétés :

image-orientation
Définit l'orientation d'une image (doit-elle être tournée de 90° ?)
image-rendering
Définit le mode de mise à l'échelle des images.
object-fit
Définit comment un contenu multimédia (image, vidéo) doit s'adapter aux dimensions de son contenant.
object-position
Définit la position d'une image ou d'une vidéo par rapport à son container.

Fonctions :

conic-gradient()
Définit un dégradé de couleurs conique.
⚠
cross-fade()
Réalise le mélange de plusieurs images.
element()
Récupère l'aspect d'un élément sous forme d'une image.
⚠
image()
Désigne une image en précisant, le cas échéant, son sens de lecture.
image-set()
Propose au navigateur un choix d'images afin que ce dernier puisse choisir celle qui est le plus adapté (résolution, format...).
linear-gradient()
Détermine un dégradé de couleur évoluant de façon linéaire d'un bout à l'autre de l'élément.
radial-gradient()
Détermine un dégradé de couleur radial (depuis le centre vers les bords).
repeating-conic-gradient()
Définit un dégradé de couleurs conique, et le répète sur toute la surface de l'élément.
repeating-radial-gradient()
Détermine un dégradé de couleur radial et le répète sur toute la surface de l'élément.
⚠
stripes()
Définit une image en bande de couleurs.