Como usar um gerador de gradientes sem ficar igual a todo mundo

Um gerador de gradientes é uma ferramenta que monta um gradiente para você: você escolhe ou sorteia as cores, define uma direção e ele exporta o código CSS ou uma imagem. É o jeito mais rápido de conseguir uma mistura bonita. É também o motivo de tantos sites, posts e apresentações compartilharem os mesmos fundos de roxo para rosa ou de azul para ciano. O problema não é o gerador. É usar a primeira resposta dele.

Este guia explica por que os resultados dos geradores convergem e apresenta seis ajustes que tornam um resultado seu. Para alguns deles você vai precisar do básico de gradientes lineares em CSS.

O que um gerador de gradientes realmente faz

A maioria dos geradores faz três coisas. Escolhe duas ou mais cores, por um seletor, um sorteio ou uma biblioteca de paletas populares. Define um tipo e uma direção, em geral linear com um ângulo. E escreve o código, normalmente um único valor linear-gradient(), às vezes com exportação em PNG ou SVG. Algumas ferramentas mais novas criam gradientes em malha ou em manchas, e algumas aceitam um prompt de texto.

Por que os resultados dos geradores são todos parecidos

• Duas paradas por padrão. Misturas de duas cores são as mais simples de gerar e as mais fáceis de reconhecer como genéricas.
• O mesmo ângulo. 135 graus, do canto superior esquerdo ao inferior direito, é um padrão comum e não combina com quase nada em particular.
• Paletas populares. As bibliotecas mostram as combinações mais copiadas primeiro, então os gradientes mais usados são usados ainda mais.
• Saturação máxima. Seletores aleatórios e presets tendem a cores vivas, que impressionam em uma miniatura e agridem atrás do texto.
• Nenhum material. Um gradiente nu é liso, digital e chapado. Quase todo gradiente gerado tem esse acabamento.

Nenhum desses pontos está errado sozinho. Juntos, produzem um visual que pertence a todo mundo, o oposto do que uma marca precisa. O branding com gradiente explica por que isso importa além do gosto.

Seis ajustes que tornam um gradiente gerado seu

1. 1

   Parta das suas cores

   Cole as cores da sua marca, ou cores coletadas de uma foto de que você gosta, em vez de sortear cores aleatórias. Tirar uma paleta de uma imagem é uma boa fonte.

2. 2

   Adicione uma terceira parada e mova-a

   Uma cor intermediária aparentada a 40% ou 60%, e não a 50%, dá forma à mistura. Agora ela se inclina, o que parece luz e não preenchimento.

3. 3

   Mude a interpolação

   Misturar em OKLCH mantém as cores vivas no meio e evita manchas cinzas. Veja gradientes em OKLCH.

4. 4

   Ajuste a direção ao layout

   Aponte a luz para onde está o conteúdo. Uma queda vertical combina com um story; um horizonte baixo combina com um banner; um brilho radial combina com a foto de um produto.

5. 5

   Adicione grão ou um material

   Uma camada de ruído fino esconde o banding e dá textura à superfície. É o caminho mais rápido do digital ao tátil.

6. 6

   Recorte, não só preencha

   Use uma parte de um gradiente maior, ou amplie-o para aparecer só uma transição suave. Recortar muda mais o clima do que trocar as cores.

Da saída do gerador ao código de produção

Os geradores costumam exportar mais do que você precisa, ou menos. Confira o código antes de colá-lo: os navegadores modernos não precisam mais de prefixos de fabricante para gradientes, e vale acrescentar uma cor sólida de reserva para o caso raro de o gradiente não renderizar.

/* Edited generator output: solid fallback, own colours, OKLCH blend */
.hero {
  background-color: #1e2a5a;
  background-image: linear-gradient(in oklch 170deg, #1e2a5a 0%, #4f46e5 60%, #f0abfc 100%);
}

Se o gradiente for usado em e-mail, como imagem social ou em impressão, exporte uma imagem em vez de CSS. Para imagens, gere no tamanho final, adicione grão antes de exportar e salve em PNG para evitar faixas de compressão.

Teste antes de publicar

A maioria dos gradientes falha no contraste, e não na cor. Ponha o seu título de verdade sobre ele e confira no ponto mais claro atrás do texto. Texto sobre gradiente mostra como.

Quando um gerador não basta

Um gerador dá cor. Não dá uma superfície com material, luz e movimento, e não pode garantir que ninguém mais esteja usando o mesmo resultado. Se você quer um gradiente que pertença a você, precisa de algo que o compare com o de todo mundo.

É assim que a Forge do Gradiently funciona. Descreva um visual em uma frase ou monte-o controle por controle: até oito cores, até três materiais empilhados, luz, grão e movimento. Antes de um Mark novo ser publicado, ele é comparado com todos os outros Marks, e o que ficar próximo demais é recusado. O resultado renderiza ao vivo atrás dos seus designs e pode ter exatamente um dono.

GR·M0K1·EJ

Veiled Salon

Ver este Mark