# Motivi CSS con gradienti ripetuti

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

I punti di colore netti trasformano i gradienti in forme, e background-size trasforma le forme in riquadri. Con queste due idee disegni la maggior parte dei motivi classici in poche righe, senza file immagine.

## The short version

- I motivi CSS si disegnano con gradienti che usano punti di colore netti, così i colori cambiano all’istante invece di sfumare.
- Le funzioni repeating-linear-gradient, repeating-radial-gradient e repeating-conic-gradient ripetono i loro punti per riempire l’elemento, e disegnano strisce, anelli e raggi.
- background-size trasforma un singolo gradiente in un riquadro, ed è così che si costruiscono griglie di pois, griglie di linee, scacchiere e vichy.
- Le posizioni dei punti scritte in pixel mantengono le strisce nitide e regolari, mentre le percentuali possono produrre bordi irregolari e sfocati.
- I motivi dietro il testo dovrebbero avere poco contrasto, così le parole restano facili da leggere.

I **motivi CSS** sono sfondi ripetuti, come strisce, griglie, pois e quadretti, disegnati interamente con funzioni di gradiente. Due idee li fanno funzionare. I punti di colore netti, dove due punti condividono una posizione, trasformano un gradiente in un bordo nitido. La ripetizione, con le funzioni di gradiente `repeating-*` o con il riquadro di `background-size`, trasforma un bordo in un motivo. Il risultato pesa pochi byte, scala alla perfezione e prende i colori dalle tue variabili CSS.

- Strisce diagonali: `repeating-linear-gradient(45deg, #1e293b 0 10px, #334155 10px 20px)`
- Gessato: `repeating-linear-gradient(90deg, #0f172a 0 23px, #475569 23px 24px)`
- Anelli: `repeating-radial-gradient(circle at 50% 50%, #fef3c7 0 8px, #fcd34d 8px 16px)`
- Raggi: `repeating-conic-gradient(#0f766e 0 15deg, #115e59 15deg 30deg)`
- Strisce caramella: `repeating-linear-gradient(-45deg, #fdf2f8 0 14px, #f9a8d4 14px 18px)`
- Carta a righe: `repeating-linear-gradient(0deg, #eff6ff 0 27px, #bfdbfe 27px 28px)`

Sei motivi, ciascuno un solo gradiente ripetuto. Copiane uno qualsiasi direttamente in `background`.

## Come i punti netti creano le forme

Un gradiente sfuma tra punti vicini. Se il punto successivo parte esattamente dove è finito l’ultimo, non c’è distanza su cui sfumare, quindi il colore cambia con una linea netta. La forma abbreviata è un colore con due posizioni, come `#1e293b 0 10px`, che mantiene quel colore pieno da 0 a 10 pixel. La guida al [gradiente lineare in CSS](https://gradiently.design/it/guide/css-linear-gradient) tratta nel dettaglio punti, indicazioni e punti netti.

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

Dalla sfumatura al bordo al motivo, in tre passi.

## Strisce con repeating-linear-gradient

`repeating-linear-gradient()` ripete il suo elenco di punti lungo la linea del gradiente finché l’elemento non è pieno. La lunghezza di una ripetizione è la posizione dell’ultimo punto, quindi `0 10px, 10px 20px` si ripete ogni 20 pixel. Cambia l’angolo per le diagonali e cambia il rapporto tra le due fasce per il gessato o per le strisce marcate da tendone.

| Motivo | Punti | Effetto |
| --- | --- | --- |
| Strisce regolari | `A 0 10px, B 10px 20px` | Fasce uguali, ripetizione di 20px |
| Gessato | `A 0 23px, B 23px 24px` | Una linea di 1px ogni 24px |
| Tendone | `A 0 40px, B 40px 80px` a `90deg` | Fasce verticali larghe |
| Doppia linea | `A 0 20px, B 20px 22px, A 22px 26px, B 26px 28px` | Due linee sottili vicine |

Ricette per le strisce. A e B sono i tuoi due colori; l’ultimo punto stabilisce la lunghezza della ripetizione.

> **Diagonali nitide** I bordi netti in diagonale possono sembrare frastagliati. Lasciare mezzo pixel tra i punti, come in `#1e293b 0 10px, #334155 10.5px 20px`, dà a ogni bordo un filo di antialiasing e sembra più liscio.

## Griglie, pois e riquadri con background-size

Alcuni motivi non si possono disegnare con un solo gradiente ripetuto: una griglia di pois richiede la ripetizione in due direzioni. La soluzione è disegnare un riquadro, come un punto o un angolo di griglia, poi impostare `background-size` alla dimensione del riquadro. Gli sfondi si ripetono per impostazione predefinita, quindi il riquadro riempie l’elemento.

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

Una griglia da progetto, una griglia di pois e una scacchiera. Ognuna è un solo riquadro, ripetuto da `background-size`.

La griglia è fatta di due gradienti: uno disegna una linea orizzontale di 1px in cima a ogni riquadro, l’altro una linea verticale sul suo bordo sinistro. I pois sono un piccolo gradiente radiale che diventa trasparente dopo 2 pixel. La scacchiera usa un [gradiente conico](https://gradiently.design/it/guide/css-conic-gradient) diviso in quarti, ed è per questo che le basta un solo livello.

## Vichy, tartan e zigzag

Sovrapporre strisce semitrasparenti crea motivi tessuti: dove una fascia orizzontale e una verticale si incrociano, i loro colori si sommano e il quadrato diventa più scuro. È il vichy. Aggiungi un secondo gruppo di strisce, più sottili e di un altro colore, e diventa tartan. Gli zigzag nascono da quattro angoli triangolari, ciascuno disegnato con un punto netto al 25% con un angolo diverso.

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

Un vichy rosso e uno zigzag azzurro cielo. Nello zigzag, i primi due livelli sono spostati di mezzo riquadro così i triangoli si incastrano.

## Strisce in movimento per le barre di avanzamento

Le strisce diagonali animate sono il modo classico per mostrare che qualcosa sta ancora lavorando. Disegna le strisce come riquadro con `background-size`, poi sposta `background-position` esattamente di una larghezza di riquadro. Poiché il fotogramma finale coincide con quello iniziale, il ciclo non ha salti visibili. Limitalo a piccoli elementi e fermalo per chi preferisce il [movimento ridotto](https://gradiently.design/it/guide/reduced-motion).

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

Strisce che scorrono lungo una barra di avanzamento. La distanza dell’animazione è pari alla larghezza del riquadro, quindi il ciclo è senza stacchi.

## Dimensionare, tematizzare e scalare i motivi

Scrivi le posizioni dei punti e le dimensioni dei riquadri in pixel o in `em`, non in percentuali. Le percentuali dipendono dalla dimensione dell’elemento, quindi le strisce si allungano in modo irregolare quando l’elemento cambia dimensione e i bordi possono cadere tra i pixel e sfocarsi. Usare `em` fa scalare il motivo con il testo che lo circonda, adatto a badge e etichette con motivo.

Le proprietà personalizzate rendono i motivi riutilizzabili. Definisci una volta colori e dimensione, poi variali per componente o per tema, ad esempio un motivo più chiaro in modalità chiara e uno più quieto nella [modalità scura](https://gradiently.design/it/guide/dark-mode-design).

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

Un solo motivo, tematizzato cambiando tre variabili.

## Motivi dietro il testo

### Da evitare

- Strisce ad alto contrasto direttamente dietro il testo corrente
- Motivi fini che tremolano quando la pagina scorre
- Motivi dello stesso colore del testo
- Più motivi diversi su una sola schermata

### Da fare

- Motivi a basso contrasto, due tonalità vicine di un solo colore
- Riquadri più grandi e calmi sulle superfici ampie
- Un riquadro pieno sotto il testo che poggia su un motivo affollato
- Un solo motivo come accento riconoscibile

I motivi sono un tipo di texture, e valgono le stesse regole: abbastanza sottili da essere percepiti più che letti. Le [texture di sfondo](https://gradiently.design/it/guide/background-texture) trattano grana, carta e tessuto; il [testo su sfondi affollati](https://gradiently.design/it/guide/type-on-busy-backgrounds) spiega come mantenere leggibili le parole sopra di essi.

## FAQ

### Come faccio le strisce in CSS?

Usa `repeating-linear-gradient()` con punti netti, come `repeating-linear-gradient(45deg, #1e293b 0 10px, #334155 10px 20px)`. Cambia l’angolo per la direzione e le lunghezze per la larghezza.

### Come faccio un motivo a pois in CSS?

Disegna un punto con `radial-gradient(#ca8a04 1.5px, transparent 2px)` e ripetilo con `background-size: 20px 20px`.

### Come faccio una scacchiera in CSS?

Usa `repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%)` con un `background-size` come `24px 24px`. Ogni riquadro contiene quattro quadrati.

### Perché le mie strisce CSS sono sfocate o irregolari?

Le posizioni in percentuale possono cadere tra i pixel. Usa lunghezze in pixel o em per punti e dimensioni dei riquadri, e lascia mezzo pixel tra i punti sui bordi diagonali.

### I motivi CSS con gradienti sono meglio dei motivi con immagini?

Per i motivi geometrici, di solito sì: non richiedono download, restano nitidi a ogni dimensione e si possono ricolorare con le variabili CSS. Le texture organiche o fotografiche richiedono ancora immagini.