Gradiente lineare ripetuto in CSS: strisce, anelli e motivi

Un gradiente lineare ripetuto in CSS ripete una breve sequenza di stop di colore lungo una linea finché riempie l’elemento. Scrivi repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px) e ottieni strisce rosa diagonali larghe 14 pixel, senza alcun file immagine. La lunghezza di una ripetizione è data dall’ultimo stop, qui 28px. Con la stessa idea, repeating-radial-gradient() crea anelli e repeating-conic-gradient() crea raggi.

Come funziona repeating-linear-gradient()

La sintassi è identica a quella di un normale gradiente lineare. La differenza è ciò che accade dopo l’ultimo stop: invece di mantenere il colore finale, il browser ricomincia il motivo. Due regole fanno gran parte del lavoro.

• La posizione dell’ultimo stop è la lunghezza della tessera. Stop a 0, 14px e 28px si ripetono ogni 28 pixel.
• Due colori nella stessa posizione creano un bordo netto. #f472b6 0 14px, #fdf2f8 14px 28px passa dal rosa al rosa pallido a 14px senza sfumatura.
• Ogni stop può avere due posizioni. #f472b6 0 14px significa rosa pieno da 0 a 14px, più breve che scrivere il colore due volte.
• Per le strisce usa lunghezze, non percentuali. Le percentuali sono relative alla linea del gradiente, quindi le strisce si allungano quando l’elemento cambia dimensione.

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

Motivi a strisce da copiare

La carta a righe è un buon esempio di ripetizione asimmetrica: 22 pixel di carta, un pixel di riga. Lo stesso motivo con una linea rossa di margine sopra dà un quaderno convincente. Altre idee di motivi, tra cui griglie e puntini, sono in motivi CSS.

Gradienti ripetuti o background-size

Puoi fare strisce anche con un normale linear-gradient() e background-size, che ripete una piccola immagine del gradiente. Funzionano entrambi. Si comportano in modo diverso con gli angoli.

Per tutto ciò che è diagonale, scegli prima la versione ripetuta. Per scacchiere e griglie, dove servono due direzioni insieme, background-size con gradienti sovrapposti è più semplice.

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

Il secondo colore della scacchiera parte dalla posizione 0. Uno stop non può mai stare prima del precedente, quindi il browser lo sposta dove finiva l’ultimo colore, creando un bordo netto senza ripetere il numero. È una scorciatoia utile in qualsiasi gradiente, ripetuto o no.

Anelli con repeating-radial-gradient()

La versione radiale si ripete verso l’esterno a partire da un centro, quindi le strisce diventano anelli. Sposta il centro con at per creare onde che si diffondono da un angolo. Come per i gradienti radiali, circle mantiene rotondi gli anelli; l’ellisse predefinita li allunga sul box.

Raggi con repeating-conic-gradient()

I gradienti conici girano intorno a un punto, quindi i loro stop sono angoli. Scegli una ripetizione che divida 360 in parti uguali, come 20, 30 o 45 gradi, altrimenti l’ultimo raggio avrà una larghezza diversa dagli altri. Per uno sfondo tieni i due colori vicini per luminosità; i raggi ad alto contrasto vibrano sullo schermo e rubano attenzione a tutto il resto. La sintassi completa è in gradienti conici in CSS.

Come correggere i bordi seghettati delle strisce

I bordi netti in diagonale possono sembrare a gradini, e ad alcuni livelli di zoom i browser li disegnano in modo irregolare, così alcune strisce sembrano più spesse di altre. La soluzione è dare a ogni bordo una piccolissima transizione invece di un salto perfetto.

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

Una barra di avanzamento animata a palo da barbiere

Spostare background-position esattamente di una ripetizione fa viaggiare le strisce senza scatti. Per un motivo a 45 gradi con una ripetizione di 28px, la distanza sull’asse orizzontale è la ripetizione divisa per il seno dell’angolo, circa 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; }
}

Per sfondi animati più grandi, vedi i gradienti CSS animati, che trattano tecniche più economiche. Strisce e anelli sono ottimi per dettagli, biglietti e stati di caricamento. Per uno sfondo che le persone riconoscono come tuo, i Mark di Gradiently aggiungono materia, luce e grana che un motivo ripetuto non può dare, e si disegnano a ogni dimensione in cui progetti.