Como fazer um gradiente ficar bonito: sete verificações

Saber fazer um gradiente ficar bonito resume-se a sete verificações, feitas por ordem: cores que se encontram sem ficar cinzentas, paragens colocadas de forma desigual, luz que vem de uma direção, um fundo que dá o ambiente, um toque de grão, um espaço calmo para as palavras e uma exportação que o mantém suave. Cada uma é um teste rápido com uma solução clara. Quase todos os gradientes com ar barato falham em pelo menos duas, e corrigir essas duas costuma fazer mais do que mudar as cores por completo.

1. Cores que se encontram sem estragos

Quando duas cores opostas na roda se misturam diretamente, o meio cai em cinzento. Azul a laranja e verde a rosa são os suspeitos do costume. Ou acrescentas uma cor-ponte entre elas, para a mistura percorrer a roda em vez de passar pelo centro, ou misturas num espaço de cor percetual. Gradientes lamacentos e interpolação de gradientes explicam ambos.

2. Paragens colocadas de forma desigual

Cores com espaçamento igual leem-se como uma rampa de uma predefinição. Na natureza, uma cor costuma dominar e a mudança acontece num trecho curto: um céu é quase todo azul com uma faixa quente estreita no horizonte. Dá à tua cor principal 60 a 70 por cento do enquadramento e deixa as outras chegar tarde. Paragens de cor de gradientes aprofunda a colocação e os pontos de transição.

3. Luz vinda de uma direção

Um bom gradiente parece iluminado. Escolhe de onde vem a luz, normalmente um canto de cima, e faz dessa zona a mais brilhante e saturada. Tudo o resto se afasta dela. Se não consegues apontar a fonte de luz, o gradiente parece plano, sejam quais forem as cores. Um gradiente radial suave sobreposto a um linear é a forma mais rápida de a acrescentar.

4. Um fundo que dá o ambiente

Decide se o design é escuro ou claro e assume. Um gradiente que vagueia de violeta médio a rosa médio não tem fundo, por isso parece indeciso. Uma base quase preta faz as cores brilhar; um branco quente fá-las parecer impressas. Empurra a base mais longe do que parece confortável e depois recua um passo.

5. Grão: a proporção certa de ruído

Os gradientes digitais perfeitamente lisos mostram riscas em muitos ecrãs e parecem predefinições de software. Uma camada fina de ruído resolve as duas coisas. O intervalo útil é estreito: abaixo de cerca de 2 por cento de opacidade não se vê, e acima de cerca de 8 por cento lê-se como textura deliberada e não como acabamento. Para gradientes escuros, começa em 3 por cento; para os pálidos, em 5 por cento, porque o ruído é mais difícil de ver em cores claras.

.gradient {
  position: relative;
  background: radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%);
}

.gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}

Há mais receitas de grão em gradientes granulados e textura de ruído em CSS.

6. Um espaço calmo para as palavras

A maioria dos gradientes existe para transportar uma mensagem. Descobre onde vão as palavras e garante que essa zona é a mais calma e de tom mais consistente, para que cada linha tenha o mesmo contraste. A parte mais brilhante e mais movimentada do gradiente pertence a outro lado. Nunca corrijas um mau contraste com um brilho atrás das letras: move antes a luz.

Esta é a verificação que o Gradiently faz por ti. Um Mark sabe onde estão as tuas palavras: a sua região mais calma desloca-se para trás do texto, as cores junto às letras escurecem ou clareiam, e a tinta automática escolhe texto claro ou escuro para cada linha a partir da paleta do próprio Mark.

7. Uma exportação que o mantém suave

• Imagens: exporta em PNG. A compressão JPEG transforma esbatidos longos em degraus, e as apps sociais voltam a comprimir ao carregar.
• Vídeo: usa um MP4 de alto débito no tamanho exato da plataforma, para que nada seja redimensionado.
• Tamanho: exporta nas dimensões da própria plataforma, como 1080×1350 para uma publicação do Instagram, em vez de deixares a app cortar.
• Confirma num telemóvel: olha para a versão carregada, num quarto escuro, com o brilho no máximo. É aí que o banding se esconde.

Se as riscas sobreviverem a tudo isto, banding em gradientes tem as soluções mais profundas.