# Logotipos com gradiente famosos: o que identidades conhecidas ensinam

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

Alguns redesigns amplamente documentados transformaram os gradientes de tendência em parte padrão do design de logotipos. Veja o que mudou e o que qualquer marca pode aprender com isso.

## The short version

- Os logotipos com gradiente se popularizaram em meados dos anos 2010, quando grandes apps trocaram ícones detalhados ou chapados por glifos simples sobre gradientes coloridos.
- O redesign do Instagram em 2016 trocou um ícone de câmera detalhado por um contorno simples de câmera sobre um gradiente do quente ao violeta, fazendo da cor o principal sinal de reconhecimento.
- O Messenger passou do azul sólido a um gradiente de azul, roxo e rosa em 2020, ao mesmo tempo que lançou as mensagens entre Instagram e Messenger.
- A identidade da Mozilla de 2019 deu ao Firefox e aos produtos relacionados uma família comum de gradientes vibrantes, mostrando como um gradiente pode unir várias marcas.
- As lições para qualquer logotipo com gradiente: mantenha a forma simples, leve adiante uma cor reconhecível, fixe o gradiente com exatidão e tenha sempre uma versão chapada.

Os **logotipos com gradiente famosos** passaram de incomuns a onipresentes em meados dos anos 2010, quando alguns dos apps mais usados do mundo migraram para glifos simples sobre gradientes coloridos. A mudança ensinou aos designers uma lição que continua valendo: quando um logotipo aparece como um quadradinho entre dezenas de outros, a cor faz mais do trabalho de reconhecimento do que a forma. As melhores identidades com gradiente unem uma marca muito simples a um gradiente fixo, distintivo e usado em todo lugar.

Este artigo examina três redesigns amplamente documentados e tira lições gerais deles. Ele descreve o que mudou em público, não como nem por que as empresas decidiram. Para a técnica de fazer um, veja [logotipos com gradiente: quando funcionam](https://gradiently.design/pt-br/guide/gradient-logo).

## Por que os logotipos com gradiente tomaram conta dos ícones de app

As telas iniciais dos celulares mudaram o que um logotipo precisa fazer. Todo app ganha o mesmo quadrado arredondado, mais ou menos do mesmo tamanho, cercado por outros. Ilustrações detalhadas ficam borradas nesse tamanho, e uma única cor chapada é compartilhada com dezenas de outros apps. Um gradiente oferece algo no meio: uma assinatura de cor com mais combinações do que a cor chapada permite, legível mesmo quando o glifo por cima é pequeno demais para se ver bem.

- Cores chapadas: fáceis de compartilhar: `linear-gradient(90deg, #3b82f6 0% 33%, #22c55e 33% 66%, #ef4444 66% 100%)`
- Um gradiente: mais difícil de confundir: `linear-gradient(45deg, #fbbf24 0%, #f97316 30%, #db2777 60%, #7c3aed 100%)`

As cores chapadas das marcas se repetem numa tela inicial. Um gradiente específico de várias paradas é uma assinatura muito mais rara.

## Instagram, 2016: o gradiente vira a marca

Em maio de 2016, o Instagram trocou o ícone detalhado e retrô de câmera por um contorno simples de câmera em branco sobre um gradiente que ia do amarelo quente e do laranja no canto inferior esquerdo, passando pelo rosa e pelo magenta, ao roxo no canto superior direito. No lançamento, a empresa apresentou as cores como uma evolução da listra arco-íris do ícone antigo. O redesign provocou reações fortes no início, e o gradiente continua no centro da marca desde então, renovado em 2022 junto com uma nova fonte.

Diagonal do quente ao violeta: `linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%)`

Um gradiente da mesma família do ícone de 2016: quente num canto, frio no oposto. Uma aproximação para estudo, não uma cor oficial da marca.

- **O glifo ficou mais simples à medida que a cor ficou mais rica.** Uma câmera em contorno deixa espaço para o gradiente ser a parte reconhecível.
- **O patrimônio existente foi levado adiante.** As cores do ícone antigo foram reinterpretadas, não jogadas fora.
- **Um caminho diagonal do quente ao frio** dá ao gradiente uma direção que as pessoas conseguem lembrar, não só um conjunto de cores.

## Messenger, 2020: uma mudança de cor que sinalizou uma mudança de produto

Em 2020, o Messenger trocou o logotipo em azul sólido por um gradiente de azul, roxo e rosa. A mudança veio ao mesmo tempo que as mensagens entre Instagram e Messenger. A forma, um balão de fala com um raio, permaneceu, então as pessoas ainda conseguiam encontrá-lo; só a cor mudou.

- Antes: um azul sólido: `linear-gradient(180deg, #0084ff 0%, #0084ff 100%)`
- Depois: azul em roxo e rosa: `linear-gradient(45deg, #0695ff 0%, #a334fa 55%, #ff6968 100%)`

Aproximações do antes e do depois. Manter a forma e mudar a cor permite que um logotipo familiar anuncie algo novo.

A lição: um gradiente pode dizer “isto mudou” sem perder o reconhecimento, desde que a forma que as pessoas conhecem continue. É um padrão útil para qualquer [rebranding](https://gradiently.design/pt-br/guide/rebrand-checklist): mude um sinal forte de cada vez.

## Firefox, 2019: uma família de gradientes para muitos produtos

Em 2019, a Mozilla apresentou uma nova identidade em que o Firefox virou o nome de uma família de vários produtos. O logotipo do navegador manteve a raposa, simplificada, e a família compartilhou gradientes vibrantes de amarelo, laranja, vermelho, rosa e roxo entre os ícones dos produtos. Cada ícone tinha a própria forma, mas os gradientes compartilhados faziam com que parecessem parentes.

- Rampa da família quente: `linear-gradient(135deg, #fff44f 0%, #ff980e 35%, #ff3750 70%, #9059ff 100%)`
- Rampa irmã, deslocada: `linear-gradient(135deg, #ff980e 0%, #ff3750 50%, #b833e1 100%)`
- Irmã mais fria: `linear-gradient(135deg, #ff3750 0%, #b833e1 50%, #592acb 100%)`

Um jeito de uma família de gradientes funcionar: desloque a janela ao longo de uma rampa comum para que cada produto tenha a própria mistura e todos ainda pertençam ao conjunto.

## O que essas identidades com gradiente têm em comum

| Identidade | Ano | O que mudou | Lição |
| --- | --- | --- | --- |
| Instagram | 2016 | De câmera detalhada a glifo em contorno sobre um gradiente do quente ao violeta | Simplifique a forma e deixe a cor carregar o reconhecimento |
| Messenger | 2020 | De azul sólido a um gradiente de azul, roxo e rosa | Mantenha a forma e mude a cor para sinalizar novidade |
| Firefox | 2019 | De um logotipo de navegador a uma família com gradientes compartilhados | Uma rampa de gradiente pode unir muitas marcas |

Os três põem uma forma simples e familiar sobre um gradiente exato e repetido em todo lugar.

## Cinco lições para o seu logotipo com gradiente

1. **Mantenha a forma muito simples** O gradiente fala por si, então a marca por cima deve ser legível no tamanho de um ícone de app ou de um avatar.
2. **Leve adiante uma cor reconhecível** Se você já tem uma cor conhecida, construa o gradiente a partir dela. O reconhecimento que você já conquistou vale a pena preservar.
3. **Fixe o gradiente com exatidão** Registre cada parada, posição e ângulo. Um gradiente refeito a olho vai derivando, e o reconhecimento deriva junto. A [consistência de marca](https://gradiently.design/pt-br/guide/brand-consistency) explica por quê.
4. **Tenha sempre uma versão chapada** Favicons, bordados, impressão em uma cor e algumas interfaces não conseguem mostrar um gradiente. Escolha uma cor chapada e uma versão branca ou preta do glifo.
5. **Use o gradiente além do logotipo** Os exemplos mais fortes repetem o gradiente em fundos, destaques e movimento, então ele vira um [ativo distintivo de marca](https://gradiently.design/pt-br/guide/distinctive-brand-assets) por si só.

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

Um ladrilho de gradiente com a cor chapada declarada primeiro. Escrever as paradas é o que mantém o logotipo idêntico em todo lugar.

Um gradiente também pode dar errado atrás de um logotipo, e não dentro dele. Se o seu logotipo fica sobre o seu próprio gradiente, leia [como pôr um logotipo sobre um gradiente](https://gradiently.design/pt-br/guide/logo-on-gradient-background) e, para construir uma identidade inteira em torno de um, o [branding com gradientes](https://gradiently.design/pt-br/guide/gradient-branding).

## FAQ

### Quando o Instagram passou para um logotipo com gradiente?

Em maio de 2016, quando trocou o ícone detalhado de câmera por um contorno simples de câmera sobre um gradiente que ia do amarelo e do laranja, passando pelo rosa, ao roxo.

### Por que tantos apps usam logotipos com gradiente?

Todos os ícones de app partilham o mesmo quadradinho arredondado, então a cor faz a maior parte do reconhecimento. Um gradiente específico é mais distintivo do que uma única cor chapada.

### Logotipos com gradiente funcionam na impressão?

Muitas vezes, com cuidado. Os gradientes podem fazer banding ou mudar de cor na impressão, então todo logotipo com gradiente também deve ter uma versão em cor chapada e versões em preto e branco de uma cor.

### Como faço um logotipo com gradiente que continue reconhecível?

Use uma forma simples, fixe as paradas e o ângulo exatos, repita o gradiente por toda a marca e mantenha uma reserva chapada para usos pequenos ou limitados.