# Logótipos famosos com gradiente: o que as grandes marcas nos ensinam

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

Algumas remodelações muito documentadas transformaram os gradientes de moda passageira em parte normal do design de logótipos. Eis o que mudou e o que qualquer marca pode aprender com isso.

## The short version

- Os logótipos com gradiente tornaram-se comuns em meados da década de 2010, quando grandes aplicações trocaram ícones detalhados ou planos por símbolos simples sobre gradientes coloridos.
- A remodelação do Instagram em 2016 trocou um ícone de câmara detalhado por um contorno simples de câmara sobre um gradiente do quente ao violeta, tornando a cor o principal sinal de reconhecimento.
- O Messenger passou de um azul liso para um gradiente de azul, roxo e rosa em 2020, ao mesmo tempo que introduziu as mensagens entre o Instagram e o Messenger.
- O sistema de marca da Mozilla de 2019 deu ao Firefox e aos produtos relacionados uma família comum de gradientes vivos, mostrando como um gradiente pode unir várias marcas.
- As lições para qualquer logótipo com gradiente: mantém a forma simples, preserva a cor que já é reconhecida, fixa o gradiente com exatidão e tem sempre uma versão plana.

Os **logótipos com gradiente** famosos passaram de raros a omnipresentes em meados da década de 2010, quando algumas das aplicações mais usadas do mundo adotaram símbolos simples sobre gradientes coloridos. A mudança ensinou aos designers uma lição que continua válida: quando um logótipo aparece como um pequeno quadrado entre dezenas de outros, a cor faz mais trabalho de reconhecimento do que a forma. As melhores identidades com gradiente juntam uma marca muito simples a um gradiente fixo, distintivo e usado em todo o lado.

Este artigo analisa três remodelações muito documentadas e tira delas lições gerais. Descreve o que mudou publicamente, não como nem porquê as empresas o decidiram. Para o ofício de criar um, vê [logótipos com gradiente: quando funcionam](https://gradiently.design/pt-pt/guide/gradient-logo).

## Porque é que os logótipos com gradiente dominaram os ícones de aplicações

Os ecrãs principais dos telemóveis mudaram o que um logótipo tem de fazer. Todas as aplicações recebem o mesmo quadrado arredondado, mais ou menos do mesmo tamanho, rodeado de outros. As ilustrações detalhadas ficam desfocadas a esse tamanho, e uma só cor lisa é partilhada com dezenas de outras aplicações. Um gradiente oferece um meio-termo: uma assinatura de cor com mais combinações do que a cor lisa permite, legível mesmo quando o símbolo por cima é demasiado pequeno para se ver bem.

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

As cores de marca lisas repetem-se num ecrã principal. Um gradiente específico com várias paragens é uma assinatura muito mais rara.

## Instagram, 2016: o gradiente torna-se a marca

Em maio de 2016, o Instagram trocou o seu ícone de câmara retro e detalhado por um contorno simples de câmara em branco sobre um gradiente que vai do amarelo quente e do laranja, em baixo à esquerda, passando pelo rosa e pelo magenta, até ao roxo, em cima à direita. No lançamento, a empresa apresentou as cores como uma evolução da faixa arco-íris do ícone antigo. A remodelação provocou reações fortes ao início, e o gradiente manteve-se no centro da marca desde então, renovado em 2022 juntamente com um novo tipo de letra.

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 canto oposto. Uma aproximação para estudo, não uma cor oficial da marca.

- **O símbolo simplificou-se à medida que a cor enriqueceu.** Uma câmara em contorno deixa espaço para que o gradiente seja a parte reconhecível.
- **O valor que já existia foi preservado.** As cores do ícone antigo foram reinterpretadas em vez de deitadas fora.
- **Um percurso diagonal do quente ao frio** dá ao gradiente uma direção que as pessoas conseguem recordar, não só um conjunto de cores.

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

Em 2020, o Messenger trocou o seu logótipo azul liso por um gradiente de azul, roxo e rosa. A mudança chegou ao mesmo tempo que as mensagens entre o Instagram e o Messenger. A forma, um balão de fala com um relâmpago, ficou, para que as pessoas o continuassem a encontrar; só a cor mudou.

- Antes: um só azul liso: `linear-gradient(180deg, #0084ff 0%, #0084ff 100%)`
- Depois: azul para 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 a um logótipo conhecido anunciar algo novo.

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

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

Em 2019, a Mozilla apresentou um novo sistema de marca em que Firefox passou a ser o nome de família de vários produtos. O logótipo do navegador manteve a raposa, simplificada, e a família partilhou gradientes vivos de amarelo, laranja, vermelho, rosa e roxo nos ícones dos produtos. Cada ícone tinha a sua forma, mas os gradientes partilhados faziam-nos parecer parentes.

- Rampa quente da família: `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%)`

Uma forma de uma família de gradientes funcionar: desloca a janela ao longo de uma rampa partilhada para que cada produto tenha a sua mistura e todos continuem a pertencer ao mesmo grupo.

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

| Identidade | Ano | O que mudou | Lição |
| --- | --- | --- | --- |
| Instagram | 2016 | Câmara detalhada para símbolo em contorno sobre um gradiente do quente ao violeta | Simplifica a forma, deixa a cor fazer o reconhecimento |
| Messenger | 2020 | Azul liso para gradiente de azul, roxo e rosa | Mantém a forma, muda a cor para anunciar novidades |
| Firefox | 2019 | Um logótipo de navegador para uma família com gradientes partilhados | Uma rampa de gradiente pode unir muitas marcas |

As três põem uma forma simples e conhecida sobre um gradiente exato e repetido em todo o lado.

## Cinco lições para o teu próprio logótipo com gradiente

1. **Mantém a forma muito simples** É o gradiente que fala, por isso a marca por cima deve ler-se ao tamanho de um ícone de aplicação ou de um avatar.
2. **Preserva a cor que já é reconhecida** Se já tens uma cor conhecida, constrói o gradiente a partir dela. O reconhecimento que já conquistaste merece ser mantido.
3. **Fixa o gradiente com exatidão** Regista cada paragem, posição e ângulo. Um gradiente refeito a olho desvia-se, e o reconhecimento desvia-se com ele. A [coerência de marca](https://gradiently.design/pt-pt/guide/brand-consistency) explica porquê.
4. **Tem sempre uma versão plana** Favicons, bordados, impressão a uma cor e algumas interfaces não conseguem mostrar um gradiente. Escolhe uma cor lisa e uma versão do símbolo a branco ou a preto.
5. **Usa o gradiente para lá do logótipo** Os exemplos mais fortes repetem o gradiente em fundos, destaques e movimento, para que se torne um [ativo distintivo da marca](https://gradiently.design/pt-pt/guide/distinctive-brand-assets) por direito próprio.

```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 mosaico com gradiente e a cor lisa declarada primeiro. Anotar as paragens é o que mantém o logótipo idêntico em todo o lado.

Um gradiente também pode correr mal por trás de um logótipo, e não só dentro dele. Se o teu logótipo assenta sobre o teu próprio gradiente, lê [colocar um logótipo sobre um gradiente](https://gradiently.design/pt-pt/guide/logo-on-gradient-background), e para construir uma identidade completa à volta de um, [branding com gradientes](https://gradiently.design/pt-pt/guide/gradient-branding).

## FAQ

### Quando é que o Instagram passou a ter um logótipo com gradiente?

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

### Porque é que tantas aplicações usam logótipos com gradiente?

Os ícones de aplicações partilham todos o mesmo pequeno quadrado arredondado, por isso a cor faz a maior parte do trabalho de reconhecimento. Um gradiente específico é mais distintivo do que uma só cor lisa.

### Os logótipos com gradiente funcionam em impressão?

Muitas vezes, com cuidado. Os gradientes podem criar faixas ou mudar de cor na impressão, por isso qualquer logótipo com gradiente deve ter também uma versão em cor lisa e versões a uma cor, a preto e a branco.

### Como faço um logótipo com gradiente que continue reconhecível?

Usa uma forma simples, fixa as paragens e o ângulo exatos, repete o gradiente em toda a marca e guarda uma versão plana para usos pequenos ou limitados.