Como deixar um gradiente bonito: um checklist de sete pontos

Saber como deixar um gradiente bonito se resume a sete pontos, conferidos na ordem: cores que se encontram sem ficar cinza, paradas com espaçamento desigual, luz vinda de uma direção, um fundo que define o clima, um toque de granulado, um espaço calmo para o texto e uma exportação que mantém tudo suave. Cada um é um teste rápido com uma solução clara. Quase todo gradiente que parece barato falha em pelo menos dois deles, e corrigir esses dois costuma render mais do que trocar todas as cores.

1. Cores que se encontram de forma limpa

Quando duas cores opostas no círculo cromático se misturam direto, o meio cai no cinza. Azul com laranja e verde com rosa são os casos clássicos. Ou adicione uma cor de ponte entre elas, para que a mistura dê a volta no círculo em vez de cruzar o centro, ou misture em um espaço de cor perceptual. Gradientes sujos e interpolação de gradiente explicam os dois caminhos.

2. Paradas com espaçamento desigual

Cores igualmente espaçadas parecem uma rampa de predefinição. Na natureza, uma cor costuma dominar e a mudança acontece num trecho curto: o céu é quase todo azul, com uma faixa estreita e quente no horizonte. Dê à cor principal de 60 a 70 por cento do quadro e deixe as outras chegarem tarde. Paradas de cor do gradiente aprofunda o posicionamento e as dicas de transição.

3. Luz vinda de uma direção

Um bom gradiente parece iluminado. Escolha de onde vem a luz, geralmente um canto superior, e faça dessa área a mais clara e saturada. Todo o resto se afasta dela. Se você não consegue apontar a fonte de luz, o gradiente vai parecer chapado, sejam quais forem as cores. Um gradiente radial suave sobre um linear é o jeito mais rápido de criar essa luz.

4. Um fundo que define o clima

Decida se o design é escuro ou claro, e assuma a escolha. Um gradiente que vagueia de um violeta médio para um rosa médio não tem fundo, então parece indeciso. Uma base quase preta faz as cores brilharem; um branco quente e levemente tingido faz parecerem impressas. Leve a base mais longe do que parece confortável, depois volte um passo.

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

Gradientes digitais perfeitamente lisos mostram listras em muitas telas e parecem configurações padrão de software. Uma camada fina de ruído resolve as duas coisas. A faixa útil é estreita: abaixo de uns 2 por cento de opacidade você não vê, e acima de uns 8 por cento ele vira uma textura proposital em vez de acabamento. Em gradientes escuros, comece com 3 por cento; nos pálidos, com 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;
}

Mais receitas de granulado estão em gradientes granulados e textura de ruído em CSS.

6. Um espaço calmo para o texto

A maioria dos gradientes existe para levar uma mensagem. Descubra onde o texto vai ficar e garanta que essa área seja a mais calma e uniforme em tom, para que cada linha tenha o mesmo contraste. A parte mais clara e movimentada do gradiente fica em outro lugar. Nunca corrija contraste ruim com um brilho atrás das letras: mova a luz.

Este é o ponto que o Gradiently confere por você. Um Mark sabe onde está o seu texto: a região mais calma vai para trás dele, as cores perto das letras escurecem ou clareiam, e a tinta automática escolhe texto claro ou escuro para cada linha a partir da própria paleta do Mark.

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

• Imagens: exporte em PNG. A compressão JPEG transforma transições longas em degraus, e os apps sociais comprimem de novo no upload.
• Vídeo: use um MP4 com bitrate alto no tamanho exato da plataforma, para que nada seja redimensionado.
• Tamanho: exporte nas dimensões da própria plataforma, como 1080×1350 para um post no Instagram, em vez de deixar o app cortar.
• Confira no celular: olhe a versão publicada, num quarto escuro, com o brilho no máximo. É ali que as faixas se escondem.

Se as listras sobreviverem a tudo isso, faixas em gradientes traz as soluções mais profundas.