# Logo con gradiente: quando funziona e quando passare al piatto [Canonical HTML page](https://gradiently.design/it/guide/gradient-logo) Un gradiente può far sembrare vivo un logo su uno schermo e farlo sfaldare su un biglietto da visita. Ecco come decidere, come progettarne uno che regga e la versione piatta di cui hai sempre bisogno. ## The short version - Un logo con gradiente funziona meglio sugli schermi, a dimensioni medie e grandi, e con una forma semplice e robusta. - Ogni logo con gradiente ha bisogno di una versione piatta a un colore per le dimensioni piccole, la stampa a un colore, il ricamo, l’incisione e i timbri. - I gradienti dei loghi si leggono meglio come sfumature brevi tra tinte vicine di luminosità simile, che restano vivaci anche in piccolo. - Progetta prima il logo in nero pieno: se la forma non funziona in piatto, un gradiente non la salverà. - Molti brand tengono il logo piatto e mettono il gradiente negli sfondi, ottenendo la stessa energia con meno punti di rottura. Un **logo con gradiente** funziona quando il logo vive soprattutto sugli schermi, compare a dimensioni medie o grandi e ha una forma robusta e semplice che si legge ancora in un solo colore piatto. Fatica alle dimensioni minime, nella stampa a un colore, nel ricamo e dove il colore è limitato. La regola quindi è semplice: un logo con gradiente va bene come versione principale, ma devi sempre avere una versione piatta, e la forma deve funzionare prima senza il gradiente. I loghi con gradiente sono diventati comuni quando i brand hanno cominciato a progettare prima per i telefoni, dove il colore brilla e gli schermi riproducono bene le sfumature. Il nostro sguardo sui [loghi famosi con gradiente](https://gradiently.design/it/guide/famous-gradient-logos) tratta gli esempi noti. Questa guida serve a decidere se il tuo logo debba essere così, e a farlo bene in caso affermativo. ## Quando un logo con gradiente funziona Un gradiente si guadagna il posto in un logo quando aggiunge qualcosa che un colore piatto non può: un senso di luce, di movimento, o di più cose che si uniscono. Funziona meglio in queste condizioni. - **Prima gli schermi.** Icone di app, siti web, avatar social e video, dove il colore è retroilluminato e le sfumature vengono rese in modo morbido. - **Dimensioni medie e grandi.** Una sfumatura ha bisogno di spazio: a pochi millimetri di larghezza si legge come un unico colore fangoso. - **Forme semplici e piene.** Un cerchio, una lettera in grassetto o un simbolo spesso danno al gradiente una superficie da percorrere. Le linee sottili non gli lasciano posto. - **Due o tre colori vicini.** Le sfumature brevi tra tinte adiacenti restano vivaci. I lunghi percorsi lungo la ruota dei colori diventano grigi al centro. - **Un brand che usa già i gradienti.** Il logo ripete allora il linguaggio del resto dell’identità invece di essere l’unica sfumatura in vista. - Ambra e corallo: `linear-gradient(135deg, #ffb347 0%, #ff6f61 100%)` - Verde acqua e blu: `linear-gradient(135deg, #14b8a6 0%, #2563eb 100%)` - Viola e magenta: `linear-gradient(135deg, #7c3aed 0%, #db2777 100%)` - Lime e smeraldo: `linear-gradient(135deg, #a3e635 0%, #059669 100%)` Sfumature adatte ai loghi: tinte vicine di pari intensità, così il colore resta pulito anche quando il logo è piccolo. Le coppie complementari come arancione e blu tendono a diventare grigie al centro; vedi i [gradienti fangosi](https://gradiently.design/it/guide/muddy-gradients). ## Dove i loghi con gradiente si rompono La maggior parte dei posti in cui compare un logo non è lo schermo di un telefono. Prima di impegnarti, elenca dove andrà davvero il tuo logo e controlla ogni caso con questa tabella. | Dove | Cosa succede a un gradiente | Cosa usare invece | | --- | --- | --- | | Icona della scheda del browser | Troppo piccola per vedere la sfumatura, sembra una macchia | Simbolo piatto a un colore | | Stampa a un colore, timbri, scontrini | Non si può stampare affatto | Nero pieno o un solo inchiostro | | Ricamo ed etichette tessute | Il filo non può sfumare in modo morbido | Versione piatta in uno o due colori di filo | | Incisione laser, rilievo | Nessun colore | La sola forma | | Stampa piccola (biglietti da visita, etichette) | Le sfumature possono formare fasce o macchie | Colore piatto, o un gradiente breve provato in stampa | | Su uno sfondo con gradiente | Due sfumature litigano tra loro | Versione monocromatica bianca o scura | Se la maggior parte del tuo elenco sta sul lato destro di questa tabella, un logo piatto è l’originale migliore. La stampa non è impossibile, solo esigente. [Stampare i gradienti](https://gradiently.design/it/guide/print-gradients) spiega come ottenere sfumature morbide sulla carta. E per l’ultima riga, vedi [come mettere un logo su uno sfondo sfumato](https://gradiently.design/it/guide/logo-on-gradient-background). ## Come progettare un logo con gradiente che regga 1. **Progetta la forma in nero pieno** Ogni logo dovrebbe funzionare prima come silhouette. Se non è riconoscibile in nero su bianco a piccola dimensione, un gradiente non farà che nascondere il problema. 2. **Scegli una sfumatura breve** Scegli due o tre tinte vicine di luminosità simile. Prova il punto centrale: se appare grigio o marrone, sposta un colore o aggiungi un arresto intermedio. 3. **Decidi la direzione di proposito** Le sfumature diagonali da in alto a sinistra a in basso a destra sono le più comuni. Una direzione che segue la forma, come dal basso verso l’alto per qualcosa che sale, dà al gradiente una ragione per esserci. 4. **Scegli il colore piatto di riserva** Scegli un colore pieno dalla sfumatura, spesso vicino al punto centrale, che le persone leggeranno come lo stesso brand. È il colore per le dimensioni piccole e per gli usi a colore singolo. 5. **Prepara il set completo** Gradiente, colore piatto, monocromatico bianco e monocromatico nero. Provali tutti alla dimensione di un avatar, su sfondi scuri e chiari, e stampati. 6. **Scrivi le regole** Annota gli arresti esatti, l’angolo e la riserva nella tua [guida di stile del brand](https://gradiently.design/it/guide/brand-style-guide) così nessuno ricostruisce il gradiente a occhio. - Arresto iniziale: viola: #7c3aed - Arresto finale: magenta: #db2777 - Riserva piatta: punto centrale: #ab30b2 - Mono chiaro: #ffffff - Mono scuro: #1a1026 Un set completo di colori per un logo con gradiente: i due arresti, una riserva piatta presa dal centro della sfumatura e le versioni a un colore chiara e scura. ## Logo con gradiente o sfondo con gradiente Molti brand ottengono il vantaggio di un gradiente senza metterlo nel logo. Il logo resta piatto e nitido, e il gradiente vive negli sfondi di post, packaging e sito web. Il logo non deve mai fare i conti con le dimensioni piccole o con i limiti di stampa, mentre il gradiente diventa comunque parte di come le persone ti riconoscono. Il [branding con i gradienti](https://gradiently.design/it/guide/gradient-branding) approfondisce questo approccio. Un design quadrato con un wordmark bianco con la scritta Northlight su uno sfondo sfumato ricco Un wordmark bianco piatto con il gradiente dietro: nitido a qualsiasi dimensione, e il colore fa comunque il lavoro del brand. Un banner largo con il wordmark Northlight in bianco sullo stesso gradiente, impaginato come intestazione Lo stesso abbinamento su un’intestazione larga. Il logo non cambia mai; il gradiente viene reso per la forma. ## Costruire un logo con gradiente in SVG Sul web, un logo con gradiente dovrebbe essere un SVG con il gradiente definito al suo interno, così resta nitido a ogni dimensione. I [gradienti SVG](https://gradiently.design/it/guide/svg-gradients) trattano tutte le opzioni. ```html ``` Dai al gradiente un id univoco. Se due SVG inline in una stessa pagina condividono un id e il primo è nascosto, in alcuni browser il secondo può perdere il riempimento. > **Il test degli occhi socchiusi** Guarda il tuo logo con gradiente alla dimensione di un avatar e socchiudi gli occhi. Se vedi un solo colore piatto, quel colore è la tua riserva naturale. Se vedi fango, la sfumatura è troppo lunga. ## FAQ ### I loghi con gradiente sono una buona idea? Possono esserlo, per i brand che vivono soprattutto sugli schermi e hanno un logo dalla forma robusta e semplice. Serve una versione piatta a un colore per le dimensioni piccole e la stampa. ### Come faccio una versione piatta di un logo con gradiente? Scegli un colore pieno dalla sfumatura, di solito vicino al punto centrale, che le persone leggeranno come lo stesso brand, e prepara anche le versioni monocromatiche in bianco e in nero. ### Si può stampare un logo con gradiente? Sì, in stampa a colori a una dimensione ragionevole, ma non in stampa a un colore, ricamo o incisione. Prova le dimensioni piccole stampate per verificare il banding prima di impegnarti. ### Quali colori fanno un buon logo con gradiente? Due o tre tinte vicine di luminosità simile, come dall’ambra al corallo o dal verde acqua al blu. I colori opposti tendono a diventare grigi al centro. ### Il mio logo dovrebbe avere un gradiente se il mio brand usa i gradienti? Non necessariamente. Molti brand tengono un logo piatto e mettono il gradiente negli sfondi, ottenendo lo stesso riconoscimento con meno problemi alle dimensioni piccole.