# Loghi con gradiente famosi: cosa insegnano le identità più note

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

Alcuni restyling ben documentati hanno trasformato i gradienti da tendenza a parte ordinaria del design dei loghi. Ecco cosa è cambiato e cosa ne può imparare qualsiasi brand.

## The short version

- I loghi con gradiente sono diventati comuni a metà degli anni 2010, quando le grandi app hanno sostituito icone dettagliate o piatte con semplici glifi su gradienti colorati.
- Il restyling di Instagram del 2016 ha sostituito una dettagliata icona di fotocamera con un semplice profilo di fotocamera su un gradiente dal caldo al viola, facendo del colore il principale segnale di riconoscimento.
- Messenger è passato da un blu pieno a un gradiente di blu, viola e rosa nel 2020, in concomitanza con l’introduzione dei messaggi tra Instagram e Messenger.
- Il sistema di brand di Mozilla del 2019 ha dato a Firefox e ai prodotti collegati una famiglia condivisa di gradienti vivaci, mostrando come un gradiente possa unire più marchi.
- Le lezioni per qualsiasi logo con gradiente: tieni semplice la forma, porta avanti un colore riconoscibile, fissa il gradiente con precisione e abbi sempre una versione piatta.

I **loghi con gradiente famosi** sono passati dall’essere insoliti all’essere ovunque a metà degli anni 2010, quando alcune delle app più usate al mondo sono passate a semplici glifi su gradienti colorati. Il cambiamento ha insegnato ai designer una lezione che vale ancora: quando un logo appare come un piccolo quadrato tra decine di altri, il colore fa più lavoro di riconoscimento della forma. Le migliori identità a gradiente abbinano un marchio semplicissimo a un gradiente fisso, distintivo e usato ovunque.

Questo articolo esamina tre restyling ampiamente documentati e ne ricava lezioni generali. Descrive ciò che è cambiato in pubblico, non come o perché le aziende l’abbiano deciso. Per la pratica di farne uno, vedi i [loghi con gradiente: quando funzionano](https://gradiently.design/it/guide/gradient-logo).

## Perché i loghi con gradiente hanno conquistato le icone delle app

Le schermate home dei telefoni hanno cambiato ciò che un logo deve fare. Ogni app riceve lo stesso quadrato arrotondato più o meno alla stessa dimensione, circondato da altri. Le illustrazioni dettagliate si sfocano a quella dimensione, e un singolo colore piatto è condiviso con decine di altre app. Un gradiente offre una via di mezzo: una firma di colore con più combinazioni di quante ne permetta il colore piatto, leggibile anche quando il glifo sopra è troppo piccolo per vedersi bene.

- Colori piatti: facili da condividere: `linear-gradient(90deg, #3b82f6 0% 33%, #22c55e 33% 66%, #ef4444 66% 100%)`
- Un gradiente: difficile da confondere: `linear-gradient(45deg, #fbbf24 0%, #f97316 30%, #db2777 60%, #7c3aed 100%)`

I colori piatti dei brand si ripetono su una schermata home. Un gradiente preciso con più punti è una firma molto più rara.

## Instagram, 2016: il gradiente diventa il brand

A maggio 2016 Instagram ha sostituito la sua dettagliata icona di fotocamera in stile retrò con un semplice profilo di fotocamera bianco su un gradiente che va dal giallo e arancione caldo in basso a sinistra, attraverso rosa e magenta, fino al viola in alto a destra. Al lancio, l’azienda ha presentato i colori come un’evoluzione della striscia arcobaleno della vecchia icona. Il restyling ha suscitato all’inizio forti reazioni, e il gradiente è rimasto da allora al centro del brand, rinnovato nel 2022 insieme a un nuovo carattere tipografico.

Diagonale dal caldo al viola: `linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%)`

Un gradiente della stessa famiglia dell’icona del 2016: caldo a un angolo, freddo a quello opposto. Un’approssimazione per studio, non un colore ufficiale del brand.

- **Il glifo è diventato più semplice mentre il colore diventava più ricco.** Un profilo di fotocamera lascia spazio al gradiente perché sia la parte riconoscibile.
- **Il valore già costruito è stato portato avanti.** I colori della vecchia icona sono stati reinterpretati e non buttati via.
- **Un percorso diagonale dal caldo al freddo** dà al gradiente una direzione che le persone possono ricordare, non solo un insieme di colori.

## Messenger, 2020: un cambio di colore che ha segnalato un cambio di prodotto

Nel 2020 Messenger ha sostituito il suo logo blu pieno con un gradiente di blu, viola e rosa. Il cambiamento è arrivato in concomitanza con i messaggi tra Instagram e Messenger. La forma, un fumetto con un fulmine, è rimasta, così le persone potevano ancora riconoscerlo; si è mosso solo il colore.

- Prima: un solo blu pieno: `linear-gradient(180deg, #0084ff 0%, #0084ff 100%)`
- Dopo: dal blu al viola e al rosa: `linear-gradient(45deg, #0695ff 0%, #a334fa 55%, #ff6968 100%)`

Approssimazioni del prima e del dopo. Mantenere la forma cambiando il colore permette a un logo familiare di annunciare qualcosa di nuovo.

La lezione: un gradiente può dire «questo è cambiato» senza perdere riconoscibilità, purché resti la forma che le persone conoscono. È uno schema utile per qualsiasi [rebrand](https://gradiently.design/it/guide/rebrand-checklist): cambia un solo segnale forte alla volta.

## Firefox, 2019: una famiglia di gradienti per molti prodotti

Nel 2019 Mozilla ha introdotto un nuovo sistema di brand in cui Firefox è diventato il nome di una famiglia di più prodotti. Il logo del browser ha tenuto la sua volpe, semplificata, e la famiglia ha condiviso vivaci gradienti di giallo, arancione, rosso, rosa e viola sulle icone dei prodotti. Ogni icona aveva la sua forma, ma i gradienti condivisi le facevano sembrare parenti.

- Scala calda della famiglia: `linear-gradient(135deg, #fff44f 0%, #ff980e 35%, #ff3750 70%, #9059ff 100%)`
- Scala sorella, spostata: `linear-gradient(135deg, #ff980e 0%, #ff3750 50%, #b833e1 100%)`
- Sorella più fredda: `linear-gradient(135deg, #ff3750 0%, #b833e1 50%, #592acb 100%)`

Un modo in cui funziona una famiglia di gradienti: sposta la finestra lungo una scala condivisa così ogni prodotto ha la sua miscela, e tutti restano comunque insieme.

## Cosa hanno in comune queste identità a gradiente

| Identità | Anno | Cosa è cambiato | Lezione |
| --- | --- | --- | --- |
| Instagram | 2016 | Da fotocamera dettagliata a glifo a profilo su un gradiente dal caldo al viola | Semplifica la forma, lascia che il colore porti il riconoscimento |
| Messenger | 2020 | Da blu pieno a gradiente di blu, viola e rosa | Mantieni la forma, cambia il colore per segnalare una novità |
| Firefox | 2019 | Da un logo di browser a una famiglia con gradienti condivisi | Una scala di gradiente può unire molti marchi |

Tutte e tre mettono una forma semplice e familiare sopra un gradiente preciso e ripetuto ovunque.

## Cinque lezioni per il tuo logo con gradiente

1. **Tieni la forma semplicissima** Il gradiente parla, quindi il marchio sopra deve essere leggibile alla dimensione dell’icona di un’app o di un avatar.
2. **Porta avanti un colore riconoscibile** Se hai già un colore noto, costruisci il gradiente a partire da lì. La riconoscibilità che ti sei già guadagnato vale la pena di essere mantenuta.
3. **Fissa il gradiente con precisione** Registra ogni punto, posizione e angolo. Un gradiente ricostruito a occhio si sposta, e con lui la riconoscibilità. La [coerenza del brand](https://gradiently.design/it/guide/brand-consistency) spiega perché.
4. **Abbi sempre una versione piatta** Favicon, ricami, stampa a un colore e alcune interfacce non possono mostrare un gradiente. Scegli un colore piatto e una versione bianca o nera del glifo.
5. **Usa il gradiente oltre il logo** Gli esempi più forti ripetono il loro gradiente in sfondi, evidenziazioni e movimento, così diventa un [asset distintivo del brand](https://gradiently.design/it/guide/distinctive-brand-assets) a pieno titolo.

```css
.logo-tile {
  /* Flat fallback: the one colour chosen for small or limited uses */
  background-color: #d62976;
  /* The exact gradient, with every stop recorded */
  background-image: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%);
  border-radius: 22%;
  aspect-ratio: 1;
}
```

Un riquadro con gradiente con il suo colore piatto dichiarato per primo. Mettere per iscritto i punti è ciò che mantiene il logo identico ovunque.

Un gradiente può anche andare storto dietro un logo invece che al suo interno. Se il tuo logo sta sul tuo gradiente, leggi [mettere un logo su un gradiente](https://gradiently.design/it/guide/logo-on-gradient-background), e per costruire un’intera identità attorno a uno, il [branding con i gradienti](https://gradiently.design/it/guide/gradient-branding).

## FAQ

### Quando Instagram è passato a un logo con gradiente?

A maggio 2016, quando ha sostituito la sua dettagliata icona di fotocamera con un semplice profilo di fotocamera su un gradiente dal giallo e arancione, attraverso il rosa, fino al viola.

### Perché così tante app usano loghi con gradiente?

Le icone delle app condividono tutte lo stesso piccolo quadrato arrotondato, quindi il colore fa la maggior parte del lavoro di riconoscimento. Un gradiente preciso è più distintivo di un singolo colore piatto.

### I loghi con gradiente funzionano in stampa?

Spesso, con cautela. I gradienti possono fare banding o spostarsi di colore in stampa, quindi ogni logo con gradiente dovrebbe avere anche una versione a colore piatto e versioni a un colore in bianco e nero.

### Come faccio un logo con gradiente che resti riconoscibile?

Usa una forma semplice, fissa i punti e l’angolo esatti, ripeti il gradiente in tutto il brand e tieni un colore piatto di riserva per gli usi piccoli o limitati.