# Gradiente lineare ripetuto in CSS: strisce, anelli e motivi

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

repeating-linear-gradient() prende una breve sequenza di colore e la ripete all’infinito lungo una linea. Da quest’unica idea nascono strisce, tende, barre di avanzamento e, con i fratelli radiale e conico, anelli e raggiere, tutto senza immagini.

## The short version

- Un gradiente lineare ripetuto ripete i suoi stop di colore lungo la linea del gradiente, e la lunghezza di una ripetizione è la posizione dell’ultimo stop.
- Le strisce nette nascono dando a due colori la stessa posizione, così il colore cambia all’istante invece di sfumare.
- Le strisce diagonali fatte con repeating-linear-gradient si uniscono senza giunture a qualsiasi angolo, a differenza di un gradiente lineare ripetuto con background-size.
- repeating-radial-gradient() crea anelli e onde, e repeating-conic-gradient() crea raggi e raggiere.
- I bordi netti di colore possono sembrare seghettati sullo schermo, e una transizione da mezzo pixel a un pixel li ammorbidisce.

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](https://gradiently.design/it/guide/css-linear-gradient). 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.

```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); }
```

Chiudi la ripetizione morbida sul colore da cui sei partito, altrimenti vedrai una giunzione netta ogni 40 pixel.

## Motivi a strisce da copiare

- Strisce candy: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)`
- Tenda verde acqua: `repeating-linear-gradient(90deg, #0f766e 0 40px, #f0fdfa 40px 80px)`
- Gessato blu notte: `repeating-linear-gradient(90deg, #334155 0 1px, #0f172a 1px 12px)`
- Nastro di avvertimento: `repeating-linear-gradient(135deg, #fde68a 0 10px, #1c1917 10px 20px)`
- Carta a righe: `repeating-linear-gradient(0deg, #fdf6ec 0 22px, #bfdbfe 22px 23px)`
- Viola a tre toni: `repeating-linear-gradient(90deg, #7c3aed 0 8px, #a78bfa 8px 16px, #ede9fe 16px 24px)`

Sei motivi a strisce. Cambia l’angolo per ruotarli e cambia le lunghezze per scalarli; il motivo si unisce sempre in modo pulito.

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](https://gradiently.design/it/guide/css-patterns).

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

### linear-gradient + background-size

- Ripete un rettangolo, quindi le strisce a 45 gradi richiedono calcoli accurati per allinearsi
- Preciso al pixel per strisce orizzontali e verticali
- Facile da combinare con altre tessere in una griglia
- Si anima spostando `background-position` di una tessera

### repeating-linear-gradient

- Si ripete lungo la linea del gradiente e si unisce bene a qualsiasi angolo
- Larghezza delle strisce impostata direttamente in pixel
- Una sola dichiarazione, nessuna dimensione da tenere allineata
- Si anima spostando `background-position` lungo la linea

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.

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

Due motivi che richiedono `background-size`. La scacchiera è il classico sfondo della trasparenza; la griglia sta bene su pagine tecniche e dashboard.

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](https://gradiently.design/it/guide/css-radial-gradient), `circle` mantiene rotondi gli anelli; l’ellisse predefinita li allunga sul box.

- Bersaglio indaco: `repeating-radial-gradient(circle at 50% 50%, #312e81 0 10px, #4338ca 10px 20px)`
- Onde morbide da un angolo: `repeating-radial-gradient(circle at 0% 100%, #fdf6ec 0, #f5d0a9 12px, #fdf6ec 24px)`
- Raggiera ambra: `repeating-conic-gradient(from 0deg, #f59e0b 0deg 10deg, #fde68a 10deg 20deg)`
- Raggi bassi dal pavimento: `repeating-conic-gradient(from 0deg at 50% 100%, #0f172a 0deg 6deg, #1e293b 6deg 12deg)`

Due ripetizioni radiali e due coniche. Gli stop conici sono angoli: la raggiera si ripete ogni 20 gradi, quindi ha 18 raggi per colore.

## 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](https://gradiently.design/it/guide/css-conic-gradient).

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

```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
  );
}
```

La sfumatura è troppo piccola per essere vista come gradiente, ma permette al browser di fare l’antialiasing del bordo.

> **Linee sottili e schermi ad alta densità** Una linea di un pixel può essere disegnata come due pixel a mezza intensità su alcuni schermi. Se un gessato appare sfocato, prova un numero intero di pixel del dispositivo o una linea un po’ più larga in un colore più morbido.

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

```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’immagine è più larga della barra di una ripetizione e scorre a sinistra esattamente di quella ripetizione, quindi il ciclo non ha salti. I viola a basso contrasto comunicano attività e non allarme, e poiché `background-position` ridisegna, limitalo a elementi piccoli.

Per sfondi animati più grandi, vedi i [gradienti CSS animati](https://gradiently.design/it/guide/css-animated-gradient), 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.

## FAQ

### Che differenza c’è tra linear-gradient e repeating-linear-gradient?

Un gradiente lineare mantiene l’ultimo colore dopo l’ultimo stop. Un gradiente lineare ripetuto ricomincia gli stop, così un breve motivo riempie tutto l’elemento.

### Come faccio le strisce in CSS?

Usa stop netti in un gradiente ripetuto: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)` crea strisce diagonali da 14 pixel.

### Come imposto la dimensione di un gradiente ripetuto?

La posizione dell’ultimo stop di colore stabilisce la lunghezza di una ripetizione. Usa lunghezze in pixel così le strisce restano della stessa larghezza a ogni dimensione dell’elemento.

### Perché le mie strisce CSS sembrano seghettate?

I bordi perfettamente netti in diagonale possono andare in aliasing. Lascia circa un pixel di distanza tra ogni coppia di stop così il browser può ammorbidire il bordo.

### Posso fare anelli o raggi con i gradienti ripetuti?

Sì. `repeating-radial-gradient()` crea anelli e `repeating-conic-gradient()` crea raggi; gli stop conici sono angoli e non lunghezze.