Motifs CSS avec des dégradés répétés

Les motifs CSS sont des arrière-plans répétés, comme rayures, grilles, pois et carreaux, entièrement dessinés avec des fonctions de dégradé. Deux idées les font fonctionner. Les arrêts de couleur nets, où deux arrêts partagent une position, transforment un dégradé en bord net. La répétition, avec les fonctions de dégradé repeating-* ou par mosaïque background-size, transforme un bord en motif. Le résultat pèse quelques octets, s’adapte parfaitement et tire ses couleurs de vos variables CSS.

Comment les arrêts nets font des formes

Un dégradé se mélange entre arrêts voisins. Si l’arrêt suivant commence exactement où le dernier finit, il n’y a pas de distance pour mélanger : la couleur change en ligne nette. Le raccourci est une couleur avec deux positions, comme #1e293b 0 10px, qui garde cette couleur pleine de 0 à 10 pixels. Le guide du dégradé linéaire CSS traite en détail des arrêts, des points d’inflexion et des arrêts nets.

/* a soft blend */
background: linear-gradient(90deg, #1e293b, #334155);

/* a hard edge at 50% */
background: linear-gradient(90deg, #1e293b 50%, #334155 50%);

/* the same stripe pair, repeated every 20px */
background: repeating-linear-gradient(90deg, #1e293b 0 10px, #334155 10px 20px);

Des rayures avec repeating-linear-gradient

repeating-linear-gradient() répète sa liste d’arrêts le long de la ligne du dégradé jusqu’à remplir l’élément. La longueur d’une répétition est la position du dernier arrêt : 0 10px, 10px 20px se répète donc tous les 20 pixels. Changez l’angle pour des diagonales, et le rapport entre les deux bandes pour des fines rayures ou de larges rayures de store.

Grilles, pois et mosaïques avec background-size

Certains motifs ne se dessinent pas avec un seul dégradé répété : une grille de points demande une répétition dans deux directions. La solution est de dessiner une mosaïque, comme un point ou un coin de grille, puis de régler background-size à la taille de la mosaïque. Les arrière-plans se répètent par défaut : la mosaïque remplit donc l’élément.

.grid-lines {
  background-color: #0f172a;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}

.dots {
  background-color: #fefce8;
  background-image: radial-gradient(#ca8a04 1.5px, transparent 2px);
  background-size: 20px 20px;
}

.checkerboard {
  background: repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 24px 24px;
}

La grille se fait avec deux dégradés : l’un dessine une ligne horizontale de 1px en haut de chaque mosaïque, l’autre une ligne verticale à son bord gauche. Les points sont un petit dégradé radial qui devient transparent après 2 pixels. Le damier utilise un dégradé conique découpé en quarts, c’est pourquoi une seule couche suffit.

Vichy, tartan et zigzags

Superposer des rayures semi-transparentes fait des motifs tissés : là où une bande horizontale et une verticale se croisent, leurs couleurs s’empilent et le carré s’assombrit. C’est le vichy. Ajoutez un second jeu de rayures plus fines d’une autre couleur et cela devient un tartan. Les zigzags viennent de quatre coins triangulaires, chacun dessiné avec un arrêt net à 25 % sous un angle différent.

.gingham {
  background-color: #ffffff;
  background-image:
    linear-gradient(90deg, rgb(220 38 38 / 0.45) 50%, transparent 0),
    linear-gradient(rgb(220 38 38 / 0.45) 50%, transparent 0);
  background-size: 24px 24px;
}

.zigzag {
  background-color: #e0f2fe;
  background-image:
    linear-gradient(135deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(225deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(315deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(45deg, #0ea5e9 25%, transparent 25%);
  background-position: -16px 0, -16px 0, 0 0, 0 0;
  background-size: 32px 32px;
}

Des rayures en mouvement pour les barres de progression

Des rayures diagonales animées sont la façon classique de montrer que quelque chose travaille encore. Dessinez les rayures comme une mosaïque avec background-size, puis déplacez background-position d’exactement une largeur de mosaïque. Comme l’image finale correspond à l’image de départ, la boucle n’a aucun saut visible. Réservez-le aux petits éléments et arrêtez-le pour ceux qui préfèrent le mouvement réduit.

.progress {
  background-color: #4f46e5;
  background-image: linear-gradient(45deg, rgb(255 255 255 / 0.18) 25%, transparent 25% 50%, rgb(255 255 255 / 0.18) 50% 75%, transparent 75%);
  background-size: 28px 28px;
  animation: crawl 1s linear infinite;
}

@keyframes crawl {
  to { background-position: 28px 0; }
}

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

Dimensionner, thématiser et mettre à l’échelle les motifs

Écrivez les positions d’arrêt et les tailles de mosaïque en pixels ou en em, pas en pourcentages. Les pourcentages dépendent de la taille de l’élément : les rayures s’étirent donc inégalement quand il se redimensionne, et les bords peuvent tomber entre deux pixels et devenir flous. Employer em fait évoluer un motif avec le texte qui l’entoure, ce qui convient aux badges et libellés à motif.

Les propriétés personnalisées rendent les motifs réutilisables. Définissez une fois les couleurs et la taille, puis faites-les varier par composant ou par thème, par exemple un motif plus clair en mode clair et un plus discret en mode sombre.

.stripes {
  --a: #1e293b;
  --b: #334155;
  --w: 10px;
  background: repeating-linear-gradient(45deg, var(--a) 0 var(--w), var(--b) var(--w) calc(var(--w) * 2));
}

.stripes--warm {
  --a: #fff7ed;
  --b: #fed7aa;
  --w: 14px;
}

Des motifs derrière du texte

Les motifs sont une sorte de texture, et les mêmes règles s’appliquent : assez subtils pour se sentir plutôt que se lire. La texture d’arrière-plan traite du grain, du papier et du tissu ; le texte sur des arrière-plans chargés explique comment garder les mots lisibles par-dessus.