Como usar um gerador de gradientes sem ficar igual a toda a gente

Um gerador de gradientes é uma ferramenta que constrói um gradiente por ti: escolhes ou sorteias as cores, defines uma direção e ele exporta código CSS ou uma imagem. É a forma mais rápida de obter uma mistura bonita. É também a razão de tantos sites, publicações e apresentações partilharem os mesmos fundos de roxo a rosa ou de azul a ciano. O problema não é o gerador. É usar a primeira resposta dele.

Este guia explica porque é que os resultados dos geradores convergem e percorre seis edições que tornam um resultado teu. Para algumas delas precisas do essencial sobre gradientes lineares em CSS.

O que um gerador de gradientes realmente faz

A maioria dos geradores faz três coisas. Escolhem duas ou mais cores, a partir de um seletor, de um sorteio ou de uma biblioteca de paletas populares. Definem um tipo e uma direção, normalmente linear com um ângulo. E escrevem o código, tipicamente um único valor linear-gradient(), por vezes com uma exportação em PNG ou SVG. Algumas ferramentas mais recentes fazem gradientes de malha ou de manchas, e outras aceitam uma instrução em texto.

Porque é que os resultados dos geradores parecem todos iguais

• Duas paragens por defeito. As 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, de cima à esquerda para baixo à direita, é uma predefinição comum e não serve bem quase nada em particular.
• Paletas populares. As bibliotecas mostram primeiro as combinações mais copiadas, por isso os gradientes mais usados são usados ainda mais.
• Saturação máxima. Os seletores aleatórios e as predefinições inclinam-se para cores vivas, que impressionam numa miniatura e são agressivas por trás de texto.
• Sem material. Um gradiente simples é liso, digital e plano. Quase todos os gradientes gerados partilham esse acabamento.

Nenhum destes pontos está errado por si só. Juntos produzem um visual que pertence a todos, o oposto do que uma marca precisa. Branding com gradientes explica porque é que isso importa para além do gosto.

Seis edições que tornam teu um gradiente gerado

1. 1

   Parte das tuas cores

   Cola as cores da tua marca, ou cores recolhidas de uma fotografia de que gostes, em vez de sortear cores aleatórias. Tirar uma paleta de uma imagem é uma boa fonte.

2. 2

   Acrescenta uma terceira paragem e desloca-a

   Uma cor intermédia relacionada aos 40% ou aos 60%, não aos 50%, dá forma à mistura. A mistura passa a inclinar-se, o que se lê como luz e não como preenchimento.

3. 3

   Muda a interpolação

   Misturar em OKLCH mantém as cores vivas no meio e evita manchas cinzentas. Vê gradientes OKLCH.

4. 4

   Ajusta a direção ao esquema

   Aponta a luz para onde está o conteúdo. Uma queda vertical serve um story; um horizonte baixo serve um banner; um brilho radial serve uma fotografia de produto.

5. 5

   Acrescenta grão ou um material

   Uma camada fina de ruído esconde o banding e dá textura à superfície. É a forma mais rápida de passar do digital ao tátil.

6. 6

   Recorta, não te limites a preencher

   Usa uma secção de um gradiente maior, ou amplia-o para só se ver uma transição suave. Recortar muda mais a sensação do que mudar as cores.

Do resultado do gerador ao código de produção

Os geradores exportam muitas vezes mais do que precisas, ou menos. Verifica o código antes de o colares: os navegadores modernos já não precisam de prefixos de fabricante para gradientes, e vale a pena acrescentar uma cor lisa de reserva para o caso raro de o gradiente não se desenhar.

/* 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 email, como imagem de redes sociais ou em impressão, exporta uma imagem em vez de CSS. Nas imagens, gera no tamanho final, acrescenta grão antes de exportar e guarda em PNG para evitar faixas de compressão.

Testa antes de publicar

A maioria dos gradientes falha no contraste, não na cor. Põe o teu título real sobre ele e verifica-o no ponto mais claro por trás do texto. Texto sobre gradiente explica como.

Quando um gerador não chega

Um gerador dá-te cor. Não te dá uma superfície com material, luz e movimento, e não te pode garantir que mais ninguém usa o mesmo resultado. Se queres um gradiente que seja teu, precisas de algo que o compare com o de toda a gente.

É assim que funciona a Forge da Gradiently. Descreve um visual numa frase ou constrói-o controlo a controlo: até oito cores, até três materiais sobrepostos, luz, grão e movimento. Antes de um novo Mark ser publicado, é comparado com todos os outros Marks, e tudo o que esteja demasiado próximo é recusado. O resultado desenha-se ao vivo por trás dos teus designs e pode ter exatamente um dono.

GR·M0K1·EJ

Veiled Salon

Ver este Mark