# repeating-linear-gradient en CSS : rayures, anneaux et motifs

[Canonical HTML page](https://gradiently.design/fr/guide/css-repeating-gradient)

repeating-linear-gradient() prend une courte séquence de couleurs et la répète à l’infini le long d’une ligne. Cette seule idée donne rayures, stores, barres de progression et, avec ses cousins radial et conique, anneaux et rayons, sans aucune image.

## The short version

- Un dégradé linéaire répété reproduit ses arrêts de couleur le long de la ligne du dégradé, et la longueur d’une répétition est la position du dernier arrêt.
- Les rayures nettes viennent de deux couleurs placées à la même position, si bien que la couleur change instantanément au lieu de se fondre.
- Les rayures diagonales faites avec repeating-linear-gradient se raccordent sans jointure à n’importe quel angle, contrairement à un dégradé linéaire en mosaïque avec background-size.
- repeating-radial-gradient() crée des anneaux et des ondulations, et repeating-conic-gradient() des rayons et des soleils.
- Les bords de couleur nets peuvent paraître crénelés à l’écran, et une transition d’un demi-pixel à un pixel les adoucit.

Un **dégradé linéaire répété** en CSS reproduit une courte séquence d’arrêts de couleur le long d’une ligne jusqu’à remplir l’élément. Écrivez `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)` et vous obtenez des rayures roses en diagonale de 14 pixels chacune, sans fichier image. La longueur d’une répétition est fixée par le dernier arrêt, ici 28px. Appliquez la même idée avec `repeating-radial-gradient()` pour les anneaux et `repeating-conic-gradient()` pour les rayons.

## Comment fonctionne repeating-linear-gradient()

La syntaxe est identique à celle d’un [dégradé linéaire](https://gradiently.design/fr/guide/css-linear-gradient) ordinaire. La différence tient à ce qui se passe après le dernier arrêt : au lieu de garder la couleur finale, le navigateur recommence le motif. Deux règles font l’essentiel du travail.

- **La position du dernier arrêt est la longueur du motif.** Des arrêts à `0`, `14px` et `28px` se répètent tous les 28 pixels.
- **Deux couleurs à la même position créent un bord net.** `#f472b6 0 14px, #fdf2f8 14px 28px` passe du rose au rose pâle à 14px, sans fondu.
- **Chaque arrêt peut prendre deux positions.** `#f472b6 0 14px` signifie rose uni de 0 à 14px, plus court que d’écrire la couleur deux fois.
- **Utilisez des longueurs, pas des pourcentages, pour les rayures.** Les pourcentages sont relatifs à la ligne du dégradé : les rayures s’étirent quand l’élément change de taille.

```css
/* Soft repeat: colours blend within each 40px band */
.soft { background-image: repeating-linear-gradient(90deg, #ede9fe 0px, #c4b5fd 20px, #ede9fe 40px); }

/* Hard stripes: two colours share each boundary */
.stripes { background-image: repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px); }

/* Uneven stripes: wide band, thin band */
.ticket { background-image: repeating-linear-gradient(90deg, #0f766e 0 36px, #f0fdfa 36px 40px); }
```

Terminez la répétition douce sur la couleur de départ, sinon une jointure nette apparaîtra tous les 40 pixels.

## Des motifs de rayures à copier

- Rayures sucre d’orge: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)`
- Store bleu canard: `repeating-linear-gradient(90deg, #0f766e 0 40px, #f0fdfa 40px 80px)`
- Fines rayures marine: `repeating-linear-gradient(90deg, #334155 0 1px, #0f172a 1px 12px)`
- Ruban de signalisation: `repeating-linear-gradient(135deg, #fde68a 0 10px, #1c1917 10px 20px)`
- Papier ligné: `repeating-linear-gradient(0deg, #fdf6ec 0 22px, #bfdbfe 22px 23px)`
- Violet en trois tons: `repeating-linear-gradient(90deg, #7c3aed 0 8px, #a78bfa 8px 16px, #ede9fe 16px 24px)`

Six motifs de rayures. Changez l’angle pour les faire pivoter et les longueurs pour les mettre à l’échelle ; le motif se raccorde toujours proprement.

Le papier ligné est un bon exemple de répétition asymétrique : 22 pixels de papier, un pixel de ligne. Le même motif surmonté d’une ligne de marge rouge donne un cahier convaincant. D’autres idées de motifs, dont les grilles et les pois, se trouvent dans [les motifs CSS](https://gradiently.design/fr/guide/css-patterns).

## Dégradés répétés ou background-size

Vous pouvez aussi créer des rayures avec un `linear-gradient()` ordinaire et `background-size`, qui répète en mosaïque une petite image du dégradé. Les deux fonctionnent. Ils se comportent différemment en biais.

### linear-gradient + background-size

- Répète un rectangle : des rayures à 45 degrés demandent des calculs soignés pour s’aligner
- Précis au pixel pour les rayures horizontales et verticales
- Facile à combiner avec d’autres tuiles dans une grille
- S’anime en déplaçant `background-position` d’une tuile

### repeating-linear-gradient

- Se répète le long de la ligne du dégradé, se raccorde proprement à tout angle
- Largeur des rayures fixée directement en pixels
- Une seule déclaration, aucune taille à synchroniser
- S’anime en déplaçant `background-position` le long de la ligne

Pour tout ce qui est en diagonale, pensez d’abord à la version répétée. Pour les damiers et les grilles, où il faut deux directions à la fois, `background-size` avec des dégradés superposés est plus simple.

```css
.checker {
  background-image: repeating-conic-gradient(#e7e5e4 0 25%, #fafaf9 0 50%);
  background-size: 24px 24px;
}

.grid {
  background-color: #0f172a;
  background-image:
    linear-gradient(#1e293b 1px, transparent 1px),
    linear-gradient(90deg, #1e293b 1px, transparent 1px);
  background-size: 32px 32px;
}
```

Deux motifs qui ont besoin de `background-size`. Le damier est le fond classique de la transparence ; la grille convient aux pages techniques et aux tableaux de bord.

La seconde couleur du damier commence à la position `0`. Un arrêt ne peut jamais se trouver avant le précédent : le navigateur le remonte donc là où la couleur précédente s’arrêtait, ce qui crée un bord net sans répéter le nombre. C’est un raccourci pratique dans tout dégradé, répété ou non.

## Des anneaux avec repeating-radial-gradient()

La version radiale se répète vers l’extérieur depuis un centre : les rayures deviennent des anneaux. Déplacez le centre avec `at` pour créer des ondulations qui partent d’un coin. Comme pour [les dégradés radiaux](https://gradiently.design/fr/guide/css-radial-gradient), `circle` garde les anneaux ronds ; l’ellipse par défaut les étire à la forme de la boîte.

- Cible indigo: `repeating-radial-gradient(circle at 50% 50%, #312e81 0 10px, #4338ca 10px 20px)`
- Ondulations douces depuis un coin: `repeating-radial-gradient(circle at 0% 100%, #fdf6ec 0, #f5d0a9 12px, #fdf6ec 24px)`
- Soleil ambré: `repeating-conic-gradient(from 0deg, #f59e0b 0deg 10deg, #fde68a 10deg 20deg)`
- Rayons bas depuis le sol: `repeating-conic-gradient(from 0deg at 50% 100%, #0f172a 0deg 6deg, #1e293b 6deg 12deg)`

Deux répétitions radiales et deux coniques. Les arrêts coniques sont des angles : le soleil se répète tous les 20 degrés, il compte donc 18 rayons de chaque couleur.

## Des rayons avec repeating-conic-gradient()

Les dégradés coniques tournent autour d’un point : leurs arrêts sont donc des angles. Choisissez une répétition qui divise 360 exactement, comme 20, 30 ou 45 degrés, sinon le dernier rayon n’aura pas la même largeur que les autres. Pour un fond, gardez les deux couleurs proches en valeur ; des rayons très contrastés vibrent à l’écran et détournent l’attention de tout le reste. La syntaxe complète se trouve dans [les dégradés coniques CSS](https://gradiently.design/fr/guide/css-conic-gradient).

## Corriger les bords crénelés des rayures

Les bords nets en biais peuvent paraître en escalier, et à certains niveaux de zoom les navigateurs les rendent de façon inégale : quelques rayures semblent plus épaisses que d’autres. La solution consiste à donner à chaque bord une infime transition au lieu d’un saut parfait.

```css
/* Jagged: a perfect hard edge */
.hard { background-image: repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px); }

/* Smoother: one pixel of blend at each edge */
.smooth {
  background-image: repeating-linear-gradient(
    45deg,
    #f472b6 0 13.5px,
    #fdf2f8 14.5px 27.5px,
    #f472b6 28.5px
  );
}
```

Le fondu est trop petit pour se voir comme un dégradé, mais il permet au navigateur de lisser le bord.

> **Lignes fines et écrans haute densité** Une ligne d’un pixel peut s’afficher comme deux pixels à demi-intensité sur certains écrans. Si une fine rayure paraît floue, essayez un nombre entier de pixels physiques ou une ligne un peu plus large dans une couleur plus douce.

## Une barre de progression animée façon enseigne de barbier

Déplacer `background-position` d’exactement une répétition fait défiler les rayures sans saut. Pour un motif à 45 degrés avec une répétition de 28px, la distance sur l’axe horizontal est la répétition divisée par le sinus de l’angle, soit environ 39,6px.

```css
.progress {
  background-image: repeating-linear-gradient(45deg, #6d28d9 0 14px, #8b5cf6 14px 28px);
  /* one horizontal repeat wider than the bar, so it can slide */
  background-size: calc(100% + 39.6px) 100%;
  background-repeat: no-repeat;
  animation: stripes 1s linear infinite;
}

@keyframes stripes {
  from { background-position: 0 0; }
  to { background-position: -39.6px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .progress { animation: none; }
}
```

L’image est plus large que la barre d’une répétition et glisse vers la gauche d’exactement cette répétition : la boucle n’a donc aucun saut. Des violets peu contrastés évoquent l’activité plutôt que l’alerte, et comme `background-position` provoque un nouveau rendu, réservez-la aux petits éléments.

Pour des fonds animés plus grands, voyez [les dégradés animés en CSS](https://gradiently.design/fr/guide/css-animated-gradient), qui présente des techniques moins coûteuses. Rayures et anneaux sont parfaits pour les détails, les billets et les états de chargement. Pour un fond que l’on reconnaît comme le vôtre, les Marks de Gradiently ajoutent la matière, la lumière et le grain qu’un motif répété ne peut pas offrir, et s’affichent à toutes les tailles dans lesquelles vous créez.

## FAQ

### Quelle différence entre linear-gradient et repeating-linear-gradient ?

Un dégradé linéaire garde sa dernière couleur après l’arrêt final. Un dégradé linéaire répété recommence ses arrêts, si bien qu’un motif court remplit tout l’élément.

### Comment faire des rayures en CSS ?

Utilisez des arrêts nets dans un dégradé répété : `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)` crée des rayures diagonales de 14 pixels.

### Comment définir la taille d’un dégradé répété ?

La position du dernier arrêt de couleur fixe la longueur d’une répétition. Utilisez des longueurs en pixels pour que les rayures gardent la même largeur quelle que soit la taille de l’élément.

### Pourquoi mes rayures CSS paraissent-elles crénelées ?

Des bords parfaitement nets en biais peuvent produire du crénelage. Laissez un écart d’environ un pixel entre chaque paire d’arrêts pour que le navigateur puisse lisser le bord.

### Peut-on créer des anneaux ou des rayons avec des dégradés répétés ?

Oui. `repeating-radial-gradient()` crée des anneaux et `repeating-conic-gradient()` des rayons ; les arrêts coniques sont des angles plutôt que des longueurs.