# Come fare uno sfondo con gradiente che non sembri generico [Canonical HTML page](https://gradiently.design/it/guide/gradient-background) La maggior parte degli sfondi con gradiente si somiglia perché parte dagli stessi pochi preset. Ecco un metodo in cinque passi per farne uno che sembri pensato, con codici da copiare. ## The short version - Un buon sfondo con gradiente parte da un colore di fondo, una piccola famiglia di tre-cinque colori affini, un materiale o una texture e un posto pensato per le parole. - La maggior parte degli sfondi con gradiente sembra generica perché sono preset a due colori nelle stesse tinte più diffuse, sfumati in una semplice diagonale. - Un fondo scuro o chiaro decide l’atmosfera più di qualsiasi singolo colore, quindi sceglilo per primo. - Un po’ di grana nasconde il banding e fa sembrare un gradiente digitale una superficie e non un’impostazione predefinita dello schermo. - Genera lo sfondo per ogni formato invece di ritagliare un’unica immagine, così l’area più luminosa cade sempre dove serve al design. Per fare uno **sfondo con gradiente** che non sembri generico, scegli prima un colore di fondo, aggiungi da tre a cinque colori affini e non due, dai alla superficie un materiale come la grana o una luce morbida e tieni un’area calma dove staranno le parole. La maggior parte degli sfondi con gradiente salta tutti questi passi: prendono un preset a due colori, lo fanno correre da un angolo all’altro e si fermano. Ecco perché così tanti sembrano intercambiabili. ## Perché la maggior parte degli sfondi con gradiente sembra uguale Strumenti di design, generatori e template offrono tutti la stessa breve lista di sfumature, e le tendenze spingono tutti verso le stesse tinte nello stesso momento. Dal viola al rosa, dal blu al ciano e dall’arancione al magenta sono gradevoli, ma sono usati così tanto che si leggono come un’impostazione predefinita e non come una scelta. Lo schema più ampio è spiegato in [perché tutti i feed sembrano uguali](https://gradiently.design/it/guide/why-every-feed-looks-the-same). ### Generico - Due colori saturi da un preset - Una semplice diagonale a 45 gradi - Una superficie digitale perfettamente pulita - Colore distribuito in modo uniforme, nessun posto per le parole - Un’unica immagine stirata a ogni dimensione ### Pensato - Un fondo più una famiglia di tre-cinque colori - Una luce che arriva da qualche parte - Grana, carta o lucentezza sulla superficie - Una zona calma pensata per il titolo - Generato da capo per ogni formato ## Passo 1: scegli un fondo Il fondo è il colore su cui poggia il gradiente e a cui ritorna. Definisce l’atmosfera più di qualsiasi accento. Un fondo quasi nero fa brillare il colore e sembra premium e notturno; un fondo bianco sporco caldo sembra stampato, calmo ed editoriale. Sceglilo prima di scegliere un solo accento, e mantienilo per tutto l’insieme dei design. - Fondo scuro, luce viola: `radial-gradient(circle at 75% 20%, #7c3aed 0%, #2e1065 35%, #0c0a1d 75%)` - Fondo carta, luce pesca: `radial-gradient(circle at 25% 25%, #fed7aa 0%, #fdf2e9 45%, #f7f1ea 80%)` - Fondo verde profondo, luce verde acqua: `radial-gradient(circle at 70% 80%, #0d9488 0%, #134e4a 40%, #071a1a 80%)` Tre fondi con un colore acceso ciascuno. Il fondo fa la maggior parte del lavoro; all’accento basta brillare. Se scegli lo scuro, leggi gli [sfondi con gradiente scuro](https://gradiently.design/it/guide/dark-gradient-backgrounds) prima di esportare, perché è nelle sfumature scure che il banding si vede di più. ## Passo 2: scegli da tre a cinque colori affini Due colori sono il gradiente più facile da fare e il più facile da copiare. Una piccola famiglia dà profondità: un tono d’ombra, un tono principale, una luce e un accento usato con parsimonia. Tieni i vicini vicini sulla ruota dei colori così le sfumature restano pulite, e lascia l’accento a parte. Colori opposti messi uno accanto all’altro diventano grigi dove si incontrano, come spiegano i [gradienti sporchi](https://gradiently.design/it/guide/muddy-gradients). - Fondo inchiostro: #0f0b1e - Ombra indaco: #312e81 - Viola principale: #6d28d9 - Luce lilla: #c084fc - Accento brace: #fb923c Un fondo, tre viola collegati e un accento caldo. La brace compare in un solo piccolo punto, ed è proprio per questo che si nota. ## Passo 3: dagli un materiale Una sfumatura digitale pulita sembra un’impostazione predefinita dello schermo. Un materiale la fa sembrare una superficie. La grana si legge come pellicola o stampa, la grana della carta come artigianato, una lucentezza vitrea come tecnologia e una seta morbida come lusso. Non ne serve molta: uno strato di rumore a bassa opacità basta a cambiare la sensazione. La [texture del gradiente](https://gradiently.design/it/guide/gradient-texture) confronta le famiglie, e i [gradienti granulosi](https://gradiently.design/it/guide/grainy-gradients) hanno il codice. ## Passo 4: pianifica dove vanno le parole Uno sfondo esiste per portare qualcosa: un titolo, un prezzo, una data. Decidi dove stanno quelle parole prima di finire il gradiente, e tieni quell’area più calma e con più contrasto. Metti il colore più luminoso e movimentato lontano dal testo, di solito in un angolo, e lascia che il fondo si veda dietro le parole. Per le regole sul contrasto, vedi [contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility). Un post per un evento in cui il titolo sta sull’area più luminosa del gradiente ed è difficile da leggere Un colore distribuito in modo uniforme significa che la parte più luminosa può cadere proprio dietro le parole. Lo stesso post per un evento con un’area più calma e scura del gradiente dietro il titolo Con una zona calma dietro il testo, lo stesso sfondo porta il messaggio. ## Passo 5: generalo per ogni formato Un gradiente che sta bene in un post quadrato può stare male in una storia verticale, perché il ritaglio sposta l’area luminosa. Tratta lo sfondo come una ricetta che generi a ogni dimensione, regolando dove cade la luce, invece che come una singola immagine da ritagliare. - Post 1080×1350: 1080 × 1350 - Storia 1080×1920: 1080 × 1920 - Hero di un sito 1920×1080: 1920 × 1080 - Banner del blog 1200×600: 1200 × 600 Quattro dimensioni comuni per gli sfondi. La luce deve cadere in un punto sensato in ciascuna, non dove la lascia un ritaglio. ## Uno sfondo con gradiente in CSS Sul web, un gradiente a tutta pagina ha un bug classico: se la pagina è corta, lo sfondo si ripete a bande. Dai all’elemento radice un’altezza minima, imposta un colore pieno di ripiego che si vede anche durante lo scorrimento oltre il bordo, poi sovrapponi il gradiente. ```css html { min-height: 100%; background-color: #0f0b1e; /* fallback, and the colour seen on overscroll */ } body { min-height: 100vh; margin: 0; background-image: radial-gradient(circle at 80% 15%, #6d28d9 0%, transparent 45%), radial-gradient(circle at 10% 90%, #312e81 0%, transparent 50%), linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%); } ``` Un fondo scuro, una luce viola in alto a destra e un’ombra indaco in basso a sinistra. Aggiungi sopra uno strato di grana per finire. Per una sezione hero e non per un’intera pagina, gli stessi strati funzionano sulla sezione stessa. Gli [sfondi per la hero del sito](https://gradiently.design/it/guide/website-hero-background) trattano dimensioni e prestazioni. ## Rendere tuo lo sfondo con gradiente Anche uno sfondo fatto con cura può essere campionato e riutilizzato. In Gradiently uno sfondo finito è un Mark: una ricetta di colori, materiali, luce, grana e movimento con esattamente un proprietario alla volta. Viene generato a ogni dimensione in cui progetti e fa spazio da solo alle tue parole. Puoi progettare con qualsiasi Mark gratis, e riservarne uno per renderlo tuo. ## FAQ ### Come faccio a far sembrare meno generico uno sfondo con gradiente? Parti da un colore di fondo, usa da tre a cinque colori affini invece di due, aggiungi grana o un altro materiale e pianifica un’area calma per le parole. ### Quali colori fanno un buon sfondo con gradiente? I colori vicini sulla ruota dei colori si sfumano in modo pulito. Aggiungi un accento in contrasto in una piccola area per creare interesse. ### Perché il mio sfondo con gradiente CSS si ripete a strisce lungo la pagina? L’elemento radice è più corto della finestra, quindi il gradiente si ripete. Imposta `min-height: 100%` su `html` e `min-height: 100vh` su `body`. ### Uno sfondo con gradiente deve essere scuro o chiaro? Vanno bene entrambi. I fondi scuri fanno brillare il colore e sembrano premium; quelli chiari sembrano stampati e calmi. Scegline uno e mantieni la coerenza. ### Come evito il banding in uno sfondo con gradiente? Aggiungi uno strato leggero di grana ed evita una forte compressione JPEG. I gradienti scuri e sottili sono quelli che fanno più banding.