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

Design com gradiente é usar misturas de cor como parte estrutural de um layout, e não só como preenchimento de fundo. Cada uma das ideias abaixo dá ao gradiente uma função: apontar, separar, criar um clima ou ser reconhecido. Estão agrupadas pelo lugar onde você vai usá-las, posts, slides, marcas e web, e cada uma vem com o layout ou o código para testar.

Se você precisa das cores primeiro, comece pelas combinações de cores para gradiente e depois volte para decidir o que fazer com elas.

Ideias de design com gradiente para posts de rede social

1. Título em destaque. Uma linha curta sobre a área mais clara 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ó funciona se a palavra merecer o espaço, então escolha um verbo ou um nome.
3. Campo dividido. Dois gradientes se encontrando em uma borda seca, um para o título e outro para o detalhe. A borda vira uma linha de layout.
4. Card de número. Um número grande sobre um gradiente calmo com uma explicação de uma linha. Mantenha o campo quieto para o número dominar.

1. Post de pergunta. Uma pergunta como título, com a resposta prometida na legenda. Gradientes combinam com isso 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 cuidado; uma cor agressiva briga com as palavras.
3. Série de contagem regressiva. O mesmo gradiente, alguns graus mais quente a cada dia até o lançamento. A série parece planejada e a mudança cria expectativa.
4. Foto em duotone. Uma foto mapeada nas duas cores das pontas do seu gradiente, para a fotografia e o fundo combinarem. Veja duotone.

Ideias de design com gradiente para slides

1. Slide de título com horizonte. Um topo escuro que se dissolve em uma faixa iluminada perto da base, com o título logo acima. Lembra um nascer do sol e dá um início à palestra.
2. Divisores de seção em sequência. Cada divisor de seção segue o próximo passo de uma jornada de matiz. As pessoas sabem em que ponto da apresentação estão sem barra de progresso.
3. Slides de dados discretos. Slides de conteúdo e de gráficos usam uma versão quase lisa do mesmo gradiente, para os dados levarem a cor. Fundos de apresentação trata do contraste para o texto.
4. Slide final espelhado. O último slide inverte o gradiente do slide de título, de cima para baixo. Fecha o círculo visualmente.
5. Do claro ao escuro. Comece claro e termine escuro, ou o contrário, se a sua palestra vai do problema à resposta. A cor apoia a história em silêncio.
6. Moldura, não preenchimento. Uma borda fina de gradiente em volta de uma área de conteúdo neutra mantém um slide denso legível sem sair da marca.

Ideias de design com gradiente para marcas

1. Um gradiente de assinatura e uma reserva. Escolha uma mistura e uma cor lisa tirada dela para favicons e impressão em uma cor.
2. Uma família para linhas de produto. Mantenha a estrutura e o ângulo e dê a cada linha o seu matiz. A família continua reconhecível e cada produto fica distinto.
3. Gradiente só atrás do logo. Use o gradiente em um lugar, o conjunto do logo ou o ícone do app, e cor lisa no resto. A escassez o torna memorável.
4. Variações sazonais. Deixe o mesmo gradiente um pouco mais quente no verão e mais frio no inverno, sem mudar a estrutura.
5. Gradiente como material. Adicione grão, um brilho de seda ou a textura de um papel para o gradiente parecer uma superfície. Textura é mais difícil de copiar do que cor.
6. Peças impressas. Leve o gradiente para cartões, adesivos e embalagens, planejado para a tinta. Como imprimir gradientes explica o que muda no papel.

As ideias de marca só funcionam com consistência: as mesmas cores, o mesmo ângulo e a mesma textura em todos os formatos. O branding com gradiente mostra como ter um gradiente em vez de tomá-lo emprestado.

Ideias de design com gradiente para sites e movimento

1. Brilho de hero. Um brilho radial suave atrás da captura de tela de um produto o destaca da página sem sombra projetada.
2. Uma palavra em gradiente. Aplique o gradiente a uma única palavra de um título, nunca ao parágrafo inteiro. Veja texto com gradiente.
3. Loop de deriva lenta. Um fundo que se move tão devagar que só é notado depois de alguns segundos. Parece vivo sem competir com as palavras.
4. Bordas em gradiente nos cards. Uma borda de gradiente de 1 ou 2 pixels em cards que são lisos dá à página uma assinatura com quase nenhum peso visual.
5. Mudança de cor na rolagem. Cada seção de uma página longa fica sobre o próximo passo de um gradiente, e rolar a página parece atravessar a luz.

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

Como escolher a ideia certa

Escolha a ideia que combina com a função e depois use-a com consistência por um tempo. Um gradiente repetido em vinte posts rende mais do que vinte gradientes engenhosos usados uma vez. Para paletas de cada setor, veja ideias de gradiente por setor.