Design com gradientes: 25 ideias para posts, slides e marcas

Design com gradientes é usar misturas de cor como parte estrutural de um esquema, e não apenas como preenchimento de fundo. Cada uma das ideias abaixo dá ao gradiente uma função: apontar, separar, criar um ambiente ou ser reconhecido. Estão agrupadas pelo sítio onde as vais usar, publicações, diapositivos, marcas e web, e cada uma traz o esquema ou o código para experimentares.

Se precisas primeiro das cores, começa pelas combinações de cores para gradientes e volta depois para decidires o que fazer com elas.

Ideias de design com gradientes para redes sociais

1. Título em foco. Uma linha curta sobre a zona mais brilhante de um brilho radial. A luz diz às pessoas onde ler.
2. Cartaz de uma palavra. Uma única palavra grande sobre um campo rico. Só resulta se a palavra merecer o espaço, por isso escolhe um verbo ou um nome.
3. Campo dividido. Dois gradientes que se encontram num limite nítido, um para o título e outro para o detalhe. O limite passa a ser uma linha do esquema.
4. Cartão de estatística. Um número grande sobre um gradiente calmo, com uma explicação de uma linha. Mantém o campo sossegado para o número dominar.

1. Publicação com pergunta. Uma pergunta como título, com a resposta prometida na legenda. Os gradientes ajudam porque parecem abertos e não acabados.
2. Citação sobre um campo suave. Uma citação curta sobre um gradiente de baixo contraste, com a autoria pequena. A suavidade parece pensada; a cor agressiva luta com as palavras.
3. Série de contagem decrescente. O mesmo gradiente, deslocado uns graus para o quente a cada dia até ao lançamento. A série parece planeada e a mudança cria expectativa.
4. Fotografia em duotono. Uma fotografia mapeada nas duas cores das pontas do teu gradiente, para que a fotografia e o fundo pertençam um ao outro. Vê duotono.

Ideias de design com gradientes para diapositivos

1. Diapositivo de título com horizonte. Um topo escuro que se desvanece numa faixa iluminada perto da base, com o título mesmo acima dela. Lê-se como um nascer do sol e dá um início à apresentação.
2. Separadores de secção em sequência. Cada separador segue o passo seguinte de uma só viagem de tom. As pessoas sabem em que ponto da apresentação estão sem uma barra de progresso.
3. Diapositivos de dados calmos. Os diapositivos de conteúdo e gráficos usam uma versão quase lisa do mesmo gradiente, para os dados levarem a cor. Fundos de apresentação trata do contraste do texto.
4. Diapositivo final em espelho. O último diapositivo inverte o gradiente do de título, de cima para baixo. Fecha o ciclo visualmente.
5. Do claro ao escuro. Começa claro e acaba escuro, ou o contrário, se a tua palestra vai do problema à resposta. A cor apoia a história em silêncio.
6. Moldura, não preenchimento. Um contorno fino de gradiente à volta de uma área de conteúdo neutra mantém legível um diapositivo denso sem sair da marca.

Ideias de design com gradientes para marcas

1. Um gradiente de assinatura e uma reserva. Escolhe uma mistura e uma cor lisa dela para favicons e impressão a uma cor.
2. Uma família para linhas de produtos. Mantém a estrutura e o ângulo, dá a cada linha o seu tom. A família continua reconhecível e cada produto fica distinto.
3. Gradiente só por trás do logótipo. Usa o gradiente num só sítio, o conjunto do logótipo ou o ícone da aplicação, e cor lisa no resto. A escassez torna-o memorável.
4. Mudanças sazonais. Desloca o mesmo gradiente um pouco para o quente no verão e para o frio no inverno, sem mudar a estrutura.
5. Gradiente como material. Acrescenta grão, um brilho de seda ou textura de papel para o gradiente parecer uma superfície. A textura é mais difícil de copiar do que a cor.
6. Peças impressas. Leva o gradiente para cartões, autocolantes e embalagens, planeado para a tinta. Imprimir gradientes explica o que muda no papel.

As ideias para marcas só funcionam com consistência: as mesmas cores, ângulo e textura em todos os formatos. Branding com gradientes explica como ser dono de um em vez de o pedir emprestado.

Ideias de design com gradientes para sites e movimento

1. Brilho de destaque. Um brilho radial suave por trás de uma captura de ecrã do produto destaca-a da página sem sombra projetada.
2. Uma palavra em gradiente. Aplica um gradiente a uma só palavra de um título, nunca ao parágrafo inteiro. Vê texto com gradiente.
3. Ciclo de deriva lenta. Um fundo que se move tão devagar que só se nota passados uns segundos. Parece vivo sem competir com as palavras.
4. Contornos de gradiente nos cartões. Uma borda de gradiente de 1 ou 2 píxeis à volta de cartões lisos dá à página uma assinatura com quase nenhum peso visual.
5. Mudança de cor ao fazer scroll. Cada secção de uma página longa assenta no passo seguinte de um só gradiente, e o scroll parece uma viagem pela luz.

.headline .accent {
  background: linear-gradient(90deg, #7c3aed, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Como escolher a ideia certa

Escolhe a ideia que corresponde à função e usa-a com consistência durante algum tempo. Um gradiente repetido em vinte publicações vale mais do que vinte gradientes engenhosos usados uma só vez. Para paletas por setor, vê ideias de gradientes por setor.