# Sfondi astratti: forme, campi di colore e flussi

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

Gli sfondi astratti trasmettono un’atmosfera senza raccontare una storia, ed è per questo che stanno dietro a tanti titoli, slide e pagine prodotto. Scegliere il tipo giusto di astrazione è metà del lavoro.

## The short version

- Uno sfondo astratto è fatto di colore, forma e texture invece che di una scena o di un oggetto riconoscibile.
- La maggior parte degli sfondi astratti rientra in tre tipi: geometrici (spigoli netti e motivi), fluidi (sfumature morbide e campi che scorrono) e materici (grana, rumore e materiali).
- Gli sfondi geometrici danno un senso di ordine e precisione, quelli fluidi di calma o di vita, quelli materici una sensazione fisica e artigianale.
- Anche gli sfondi astratti hanno bisogno di un’area calma, di luminosità uniforme, dove va il testo.
- Molti sfondi geometrici e fluidi si possono costruire in puro CSS con gradienti lineari, radiali, conici e ripetuti.

Uno **sfondo astratto** è fatto di colore, forma e texture e non di una scena riconoscibile. Quasi tutti appartengono a una di tre famiglie: sfondi **geometrici**, costruiti con spigoli netti, strisce e motivi; sfondi **fluidi**, costruiti con sfumature morbide e campi che scorrono; sfondi **materici**, costruiti con grana, rumore e materiali. Scegli la famiglia che corrisponde alla sensazione che ti serve, poi lascia un’area calma dove andranno le parole.

Questa guida passa in rassegna ogni famiglia con esempi dal vivo e codici, ti dice quando usare quale e come evitare che uno sfondo astratto sovrasti il contenuto. Per i tipi di gradiente che stanno alla base di molti di essi, leggi [i tipi di gradienti](https://gradiently.design/it/guide/types-of-gradients).

## Tre tipi di sfondo astratto

| Tipo | Costruito con | Trasmette | Adatto a |
| --- | --- | --- | --- |
| Geometrico | Stacchi netti, strisce, griglie, cerchi, spicchi | Ordine, precisione, energia | Tecnologia, sport, eventi, impaginati editoriali |
| Fluido | Gradienti morbidi, mesh, aloni, fasce che scorrono | Calma, vitalità, eleganza | Brand, pagine prodotto, benessere, musica |
| Materico | Grana, rumore, carta, tessuto, vetro | Concretezza, cura artigianale, calore | Artigianato, cibo, stampa, moda, tutto ciò che è fatto a mano |

Le tre famiglie. Molti buoni sfondi ne combinano due, come un gradiente fluido con una grana sottile.

## Sfondi astratti geometrici

Gli sfondi geometrici usano spigoli nitidi: divisioni, strisce, anelli, spicchi e griglie. Sembrano voluti e strutturati, e si abbinano naturalmente a impaginati tipografici forti come lo [stile svizzero](https://gradiently.design/it/guide/swiss-design). In CSS, i punti di colore netti (due colori nella stessa posizione) creano gli spigoli.

- Divisione diagonale: `linear-gradient(135deg, #0f172a 0% 50%, #f97316 50% 100%)`
- Strisce tono su tono: `repeating-linear-gradient(45deg, #1e1b4b 0 18px, #312e81 18px 36px)`
- Colore in quattro quarti: `conic-gradient(from 45deg, #f43f5e 0 25%, #f59e0b 0 50%, #10b981 0 75%, #3b82f6 0)`
- Raggi di sole: `repeating-conic-gradient(from 0deg at 50% 100%, #fde68a 0deg 6deg, #fb923c 6deg 12deg)`
- Anelli concentrici: `repeating-radial-gradient(circle at 50% 50%, #0b132b 0 14px, #1c2541 14px 28px)`
- Tre fasce: `linear-gradient(90deg, #111827 0% 33.3%, #7c3aed 33.3% 66.6%, #f5f3ff 66.6% 100%)`

Sei sfondi geometrici, ciascuno un solo gradiente CSS con punti di colore netti. Le versioni tono su tono, come le strisce e gli anelli, sono abbastanza calme per il testo.

Il trucco degli sfondi geometrici è il tono. Strisce o scacchi ad alto contrasto vibrano e rendono quasi illeggibile il testo sopra. Tieni i colori del motivo vicini per luminosità, come le strisce e gli anelli tono su tono qui sopra, e riserva l’alto contrasto alle aree senza parole. In [motivi CSS](https://gradiently.design/it/guide/css-patterns) ne trovi molti altri.

## Sfondi astratti fluidi

Gli sfondi fluidi non hanno alcuno spigolo: il colore si raccoglie, scivola e si piega come la luce sull’acqua o sulla seta. Ne fanno parte i gradienti mesh, gli aloni aurora e i nastri che scorrono. Sono più calmi ed eleganti di quelli geometrici e sono i più facili su cui mettere del testo, perché un campo morbido ha ampie aree uniformi.

- Crepuscolo liquido: `radial-gradient(ellipse at 20% 30%, #ff7a59 0%, #c43d7a 40%, #2b1055 100%)`
- Nastro d’aurora: `linear-gradient(170deg, #03121f 0%, #0b3b3a 40%, #2dd4bf 55%, #0b3b3a 70%, #03121f 100%)`
- Acque profonde: `radial-gradient(ellipse at 70% 70%, #a5f3fc 0%, #60a5fa 35%, #3730a3 75%, #1e1b4b 100%)`
- Fioritura pastello: `radial-gradient(circle at 35% 40%, #fef3c7 0%, #fbcfe8 40%, #c4b5fd 80%, #a78bfa 100%)`

Campi fluidi come singoli gradienti. I veri sfondi fluidi ne sovrappongono diversi, ed è così che si costruiscono i gradienti mesh in CSS.

```css
.fluid {
  background-color: #2b1055;
  background-image:
    radial-gradient(40% 50% at 20% 30%, #ff7a59cc, transparent 70%),
    radial-gradient(45% 55% at 80% 25%, #c43d7acc, transparent 70%),
    radial-gradient(50% 60% at 60% 85%, #5b3cc4cc, transparent 70%);
}
```

Uno sfondo fluido da tre aloni radiali sovrapposti su una base scura. Sposta le posizioni `at` per guidare dove si raccoglie la luce.

Gli sfondi fluidi hanno stili con un nome: i [gradienti mesh](https://gradiently.design/it/guide/mesh-gradients) fondono più punti di colore su una superficie, e i [gradienti aurora](https://gradiently.design/it/guide/aurora-gradients) fanno galleggiare macchie luminose su una base scura. Entrambi stanno meglio con un po’ di grana sopra.

## Sfondi astratti materici

La texture trasforma un colore piatto in una superficie che quasi si può toccare. Una grana fine ricorda la pellicola, una trama più marcata la carta, fibre morbide un tessuto, una sfocatura opaca il vetro. La texture può essere l’intero sfondo, come in un campo color carta, oppure un livello sopra un gradiente, ed è così che si fanno quasi tutti gli sfondi a gradiente dall’aria raffinata.

Un post verticale in stile journal con un titolo su uno sfondo caldo, leggermente materico

Un campo materico per un brand artigianale: è la superficie stessa a dare il tono.

Un annuncio verticale di rilascio con un titolo su un gradiente fluido, freddo e uniforme

Un campo fluido per il rilascio di un software: calmo, luminoso e pulito.

Tieni la texture sottile quando sopra c’è del testo: quanto basta per sentirla a distanza di braccio, non tanto da far sembrare sporche le lettere. [Texture di sfondo](https://gradiently.design/it/guide/background-texture) tratta nel dettaglio grana, carta, tessuto e vetro, e [gradienti granulosi](https://gradiently.design/it/guide/grainy-gradients) spiega perché un po’ di rumore fa sembrare il colore prezioso.

## Come creare uno sfondo astratto con i colori del tuo brand

I migliori sfondi astratti sembrano astratti ma appartengono a qualcuno. Partire dai tuoi colori e dalle tue forme, e non da un pacchetto di immagini stock, è ciò che lo rende possibile.

1. **Parti da due o tre colori del brand** Aggiungi un tono più profondo della stessa famiglia per dare profondità. Se non li hai ancora, ti aiuta [come scegliere i colori del brand](https://gradiently.design/it/guide/how-to-choose-brand-colors).
2. **Scegli una famiglia** Geometrico se il tuo brand è preciso o energico, fluido se è calmo o raffinato, materico se è artigianale o caldo.
3. **Prendi in prestito una forma dal brand** Una curva del logo, l’angolo di una lettera, un cerchio di un’icona. Ripeterla nello sfondo lega le due cose.
4. **Pianifica la zona calma** Decidi dove andrà il testo in ogni formato e mantieni quell’area uniforme per luminosità.
5. **Aggiungi la texture per ultima** Una grana leggera su tutto, poi controlla a dimensione telefono con parole vere sopra.

## Scegliere lo sfondo astratto giusto per il lavoro

### Evita

- Motivi ad alto contrasto dietro il testo corrente
- Tre tipi di astrazione in un solo design
- Forme casuali senza legame con il brand
- Uno sfondo così carico da diventare il messaggio

### Fai così

- Motivi tono su tono, oppure tieni i motivi lontani dalle parole
- Un solo tipo, con la texture come livello di supporto
- Forme e colori che richiamano il tuo brand
- Uno sfondo che dà il tono e poi si ritira

Adatta l’astrazione al contenuto. Una slide piena di dati chiede un campo fluido o tono su tono, quieto. Un post di lancio può reggere una divisione geometrica decisa. Un menu o un prodotto artigianale vuole la texture. E qualunque cosa scegli, provala alla dimensione reale con le parole vere sopra, perché gli sfondi astratti bellissimi da vuoti spesso litigano con il testo quando arriva.

I Mark di Gradiently sono astrazioni fluide e materiche insieme: colori, fino a tre materiali sovrapposti, luce, grana e movimento, disegnati dal vivo dietro il tuo design con la loro area più calma spostata dietro le parole. Puoi sfogliarli nel Mercato o crearne uno nella Forge.

## FAQ

### Cos’è uno sfondo astratto?

Uno sfondo fatto di colore, forma e texture e non di una scena riconoscibile. La maggior parte è geometrica, fluida o materica, oppure una combinazione.

### Come si fa uno sfondo astratto in CSS?

Usa gradienti lineari, conici e ripetuti con punti di colore netti per i motivi geometrici, e gradienti radiali sovrapposti per i campi fluidi. Aggiungi un livello di rumore SVG per la texture.

### Quale sfondo astratto è migliore per il testo?

Gli sfondi fluidi con aree ampie e uniformi sono i più facili, seguiti dai motivi geometrici tono su tono. Evita i motivi ad alto contrasto dietro le parole.

### Cosa rende raffinato uno sfondo astratto?

La sobrietà: una palette limitata, luce morbida, texture sottile e un’area calma dove sta il contenuto. Un’astrazione carica e ad alto contrasto di solito sembra più dozzinale.