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

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

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

Des motifs de rayures à copier

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.

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.

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.

.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;
}

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, circle garde les anneaux ronds ; l’ellipse par défaut les étire à la forme de la boîte.

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.

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.

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

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.

.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; }
}

Pour des fonds animés plus grands, voyez les dégradés animés en CSS, 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.