# Logo com gradiente: quando usar e quando ficar chapado [Canonical HTML page](https://gradiently.design/pt-br/guide/gradient-logo) Um gradiente pode deixar um logo vivo na tela e desmontá-lo em um cartão de visita. Veja como decidir, como projetar um que sobreviva e a versão chapada de que você sempre precisa. ## The short version - Um logo com gradiente funciona melhor em telas, em tamanhos médios e grandes e com uma forma simples e marcante. - Todo logo com gradiente precisa de uma versão chapada em uma cor para tamanhos pequenos, impressão em uma cor, bordado, gravação e carimbos. - Gradientes de logo se leem melhor como misturas curtas entre matizes vizinhos de luminosidade parecida, que continuam vivas em tamanho pequeno. - Projete o logo primeiro em preto sólido; se a forma não funciona chapada, um gradiente não a salva. - Muitas marcas mantêm o logo chapado e põem o gradiente nos fundos, o que dá a mesma energia com menos pontos de falha. Um **logo com gradiente** funciona quando o logo vive sobretudo em telas, aparece em tamanhos médios ou grandes e tem uma forma marcante e simples que ainda se lê em uma única cor chapada. Ele sofre em tamanhos minúsculos, na impressão em uma cor, no bordado e em qualquer lugar de cores limitadas. Então a regra é simples: um logo com gradiente serve como versão principal, mas você sempre precisa de uma versão chapada, e a forma tem que funcionar primeiro sem o gradiente. Logos com gradiente ficaram comuns quando as marcas passaram a projetar primeiro para o celular, onde a cor brilha e as telas reproduzem bem as misturas. Nosso olhar sobre os [logos famosos com gradiente](https://gradiently.design/pt-br/guide/famous-gradient-logos) reúne os exemplos conhecidos. Este guia trata de decidir se o seu logo deve ser um deles e de fazê-lo bem, se for o caso. ## Quando um logo com gradiente funciona Um gradiente merece o seu lugar em um logo quando acrescenta algo que uma cor chapada não consegue: uma sensação de luz, de movimento ou de várias coisas se juntando. Funciona melhor nestas condições. - **Telas primeiro.** Ícones de app, sites, avatares sociais e vídeo, onde a cor é retroiluminada e as misturas renderizam com suavidade. - **Tamanhos médios e grandes.** Uma mistura precisa de espaço; com poucos milímetros de largura, ela parece uma cor suja só. - **Formas simples e sólidas.** Um círculo, uma letra grossa ou um símbolo espesso dão ao gradiente uma superfície para percorrer. Linhas finas não lhe dão para onde ir. - **Duas ou três cores próximas.** Misturas curtas entre matizes vizinhos continuam vivas. Viagens longas pelo círculo cromático ficam cinza no meio. - **Uma marca que já usa gradientes.** O logo então repete a linguagem do resto da identidade, em vez de ser a única mistura à vista. - Âmbar para coral: `linear-gradient(135deg, #ffb347 0%, #ff6f61 100%)` - Turquesa para azul: `linear-gradient(135deg, #14b8a6 0%, #2563eb 100%)` - Violeta para magenta: `linear-gradient(135deg, #7c3aed 0%, #db2777 100%)` - Lima para esmeralda: `linear-gradient(135deg, #a3e635 0%, #059669 100%)` Misturas boas para logo: matizes vizinhos com a mesma força, para a cor continuar limpa mesmo com o logo pequeno. Pares complementares, como laranja para azul, tendem a ficar cinza no meio; veja [gradientes sujos](https://gradiently.design/pt-br/guide/muddy-gradients). ## Onde os logos com gradiente falham A maioria dos lugares onde um logo aparece não é a tela de um celular. Antes de se decidir, liste onde o seu logo realmente vai e confira cada lugar nesta tabela. | Onde | O que acontece com um gradiente | Use no lugar | | --- | --- | --- | | Ícone da aba do navegador | Pequeno demais para ver a mistura; parece uma mancha | Símbolo chapado em uma cor | | Impressão em uma cor, carimbos, recibos | Não dá para imprimir | Preto sólido ou uma tinta | | Bordado e etiquetas tecidas | A linha não consegue misturar com suavidade | Versão chapada em uma ou duas cores de linha | | Gravação a laser, relevo | Não há cor nenhuma | Só a forma | | Impressão pequena (cartões, etiquetas) | As misturas podem formar faixas ou ficar manchadas | Cor chapada, ou um gradiente curto testado na impressão | | Sobre um fundo em gradiente | Duas misturas brigam entre si | Versão mono branca ou escura | Se a maior parte da sua lista estiver no lado direito desta tabela, um logo chapado é o melhor original. Imprimir não é impossível, só exigente. [Como imprimir gradientes](https://gradiently.design/pt-br/guide/print-gradients) mostra como conseguir misturas suaves no papel. E, para a última linha, veja [como pôr um logo sobre um fundo em gradiente](https://gradiently.design/pt-br/guide/logo-on-gradient-background). ## Como projetar um logo com gradiente que sobreviva 1. **Projete a forma em preto sólido** Todo logo deve funcionar primeiro como silhueta. Se ele não é reconhecível em preto sobre branco em tamanho pequeno, um gradiente só vai esconder o problema. 2. **Escolha uma mistura curta** Escolha dois ou três matizes vizinhos com luminosidade parecida. Teste o ponto médio: se parecer cinza ou marrom, mude uma cor ou adicione uma parada no meio. 3. **Decida a direção de propósito** Misturas diagonais do canto superior esquerdo ao inferior direito são as mais comuns. Uma direção que acompanha a forma, como de baixo para cima em algo que sobe, dá ao gradiente um motivo para estar ali. 4. **Escolha a cor lisa de reserva** Escolha uma cor sólida da mistura, muitas vezes perto do ponto médio, que as pessoas leiam como a mesma marca. É a cor para tamanhos pequenos e uso em uma cor só. 5. **Monte o conjunto completo** Gradiente, cor chapada, mono branco e mono preto. Teste cada um em tamanho de avatar, sobre fundos escuros e claros, e impresso. 6. **Escreva as regras** Registre as paradas exatas, o ângulo e a cor de reserva no seu [guia de estilo da marca](https://gradiently.design/pt-br/guide/brand-style-guide) para ninguém refazer o gradiente no olho. - Parada inicial: violeta: #7c3aed - Parada final: magenta: #db2777 - Reserva chapada: ponto médio: #ab30b2 - Mono claro: #ffffff - Mono escuro: #1a1026 Um conjunto de cores completo de logo com gradiente: as duas paradas, uma reserva chapada tirada do meio da mistura e versões claras e escuras em uma cor. ## Logo com gradiente ou fundo com gradiente Muitas marcas ficam com o benefício do gradiente sem pô-lo no logo. O logo continua chapado e nítido, e o gradiente vive nos fundos de posts, embalagens e do site. O logo nunca precisa enfrentar tamanhos pequenos nem limites de impressão, e o gradiente ainda passa a fazer parte do jeito como as pessoas reconhecem você. O [branding com gradiente](https://gradiently.design/pt-br/guide/gradient-branding) aprofunda essa abordagem. Um design quadrado com um logotipo branco escrito Northlight sobre um fundo de gradiente rico Um logotipo branco chapado com o gradiente atrás: nítido em qualquer tamanho, e a cor continua fazendo o trabalho da marca. Um banner largo com o logotipo Northlight em branco sobre o mesmo gradiente, montado para um cabeçalho A mesma combinação em um cabeçalho largo. O logo nunca muda; o gradiente é renderizado para o formato. ## Como criar um logo com gradiente em SVG Na web, um logo com gradiente deve ser um SVG com o gradiente definido dentro dele, para continuar nítido em todos os tamanhos. [Gradientes em SVG](https://gradiently.design/pt-br/guide/svg-gradients) trata de todas as opções. ```html ``` Dê ao gradiente um id único. Se dois SVGs inline da mesma página compartilham um id e o primeiro está oculto, o segundo pode perder o preenchimento em alguns navegadores. > **O teste de apertar os olhos** Olhe seu logo com gradiente em tamanho de avatar e aperte os olhos. Se você vir uma única cor chapada, essa cor é a sua reserva natural. Se vir lama, a mistura é longa demais. ## FAQ ### Logos com gradiente são uma boa ideia? Podem ser, para marcas que vivem sobretudo em telas e têm uma forma de logo simples e marcante. Elas precisam de uma versão chapada em uma cor para tamanhos pequenos e impressão. ### Como fazer uma versão chapada de um logo com gradiente? Escolha uma cor sólida da mistura, em geral perto do ponto médio, que as pessoas leiam como a mesma marca, e faça também versões mono branca e mono preta. ### Dá para imprimir um logo com gradiente? Sim, em impressão colorida em um tamanho razoável, mas não em impressão de uma cor, bordado ou gravação. Teste tamanhos impressos pequenos para banding antes de se decidir. ### Que cores fazem um bom logo com gradiente? Dois ou três matizes vizinhos de luminosidade parecida, como âmbar para coral ou turquesa para azul. Cores opostas tendem a ficar cinza no meio. ### Meu logo deve ter gradiente se a minha marca usa gradientes? Não necessariamente. Muitas marcas mantêm um logo chapado e põem o gradiente nos fundos, o que dá o mesmo reconhecimento com menos problemas em tamanhos pequenos.