Como fazer um fundo de gradiente que não pareça genérico

Para fazer um fundo de gradiente que não pareça genérico, escolha primeiro uma cor de base, acrescente de três a cinco cores relacionadas em vez de duas, dê à superfície um material como grão ou luz suave e mantenha uma área calma onde as palavras ficarão. A maioria dos fundos de gradiente pula todos esses passos: pega uma predefinição de duas cores, corre de canto a canto e para. É por isso que tantos parecem intercambiáveis.

Por que a maioria dos fundos de gradiente parece igual

Ferramentas de design, geradores e templates oferecem a mesma lista curta de misturas, e as tendências empurram todo mundo para os mesmos matizes ao mesmo tempo. Violeta a rosa, azul a ciano e laranja a magenta são agradáveis, mas são tão usados que se leem como um padrão e não como uma escolha. O padrão mais amplo é explicado em por que todo feed parece igual.

Passo 1: escolha uma base

A base é a cor sobre a qual o gradiente fica e à qual ele volta. Ela define o clima mais do que qualquer destaque. Uma base quase preta faz a cor brilhar e parece premium e noturna; uma base off-white quente parece impressa, calma e editorial. Escolha uma antes de escolher um único destaque e mantenha-a para o conjunto todo de designs.

Se você escolher a escura, leia os fundos de gradiente escuros antes de exportar, porque nas misturas escuras é onde o banding mais aparece.

Passo 2: escolha de três a cinco cores relacionadas

Duas cores são o gradiente mais fácil de fazer e o mais fácil de copiar. Uma pequena família dá profundidade: um tom de sombra, um tom principal, um realce e um destaque usado com parcimônia. Mantenha as vizinhas próximas no círculo cromático para que as misturas fiquem limpas e deixe o destaque à parte. Cores opostas lado a lado ficam cinzentas onde se encontram, o que é tratado nos gradientes sujos.

Passo 3: dê um material

Uma mistura digital limpa parece um padrão de tela. Um material a faz parecer uma superfície. O grão lembra filme ou impressão, a textura de papel lembra artesanato, um brilho vítreo lembra tecnologia e uma seda suave lembra luxo. Você não precisa de muito: uma camada de ruído em baixa opacidade basta para mudar a sensação. A textura de gradiente compara as famílias, e os gradientes com grão trazem o código.

Passo 4: planeje onde vão as palavras

Um fundo existe para carregar algo: um título, um preço, uma data. Decida onde essas palavras ficam antes de terminar o gradiente e mantenha essa área mais calma e de maior contraste. Ponha a cor mais brilhante e agitada longe do texto, em geral num canto, e deixe a base aparecer atrás das palavras. Para as regras de contraste, veja o contraste de cores e acessibilidade.

Passo 5: renderize para cada formato

Um gradiente que fica certo como post quadrado pode ficar errado como story vertical, porque o recorte move a área brilhante. Trate o fundo como uma receita que você renderiza em cada tamanho, ajustando onde a luz cai, e não como uma imagem única que você recorta.

Post 1080×1350

1080 × 1350

Story 1080×1920

1080 × 1920

Herói de site 1920×1080

1920 × 1080

Banner de blog 1200×600

1200 × 600

Um fundo de gradiente em CSS

Na web, um gradiente de página inteira tem um bug clássico: se a página é curta, o fundo se repete em faixas. Dê ao elemento raiz uma altura mínima, defina uma cor de reserva sólida que também aparece durante o overscroll e depois sobreponha o gradiente.

html {
  min-height: 100%;
  background-color: #0f0b1e; /* fallback, and the colour seen on overscroll */
}

body {
  min-height: 100vh;
  margin: 0;
  background-image:
    radial-gradient(circle at 80% 15%, #6d28d9 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, #312e81 0%, transparent 50%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}

Para uma seção de herói e não uma página inteira, as mesmas camadas funcionam na própria seção. Os fundos de herói para sites tratam de tamanho e desempenho.

Sendo dono do seu fundo de gradiente

Mesmo um fundo feito com cuidado pode ser amostrado e reutilizado. No Gradiently, um fundo finalizado é um Mark: uma receita de cores, materiais, luz, grão e movimento com exatamente um dono por vez. Ele é renderizado em todo tamanho em que você cria e abre espaço para as suas palavras sozinho. Você pode criar com qualquer Mark de graça e reservar um para torná-lo seu.