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

Para fazer um fundo em gradiente que não pareça genérico, escolhe primeiro uma cor de base, acrescenta três a cinco cores relacionadas em vez de duas, dá à superfície um material como grão ou luz suave, e guarda uma zona calma onde as palavras vão ficar. A maioria dos fundos em gradiente salta todos estes passos: pega numa predefinição de duas cores, estica-a de canto a canto e para. É por isso que tantos parecem intermutáveis.

Porque é que a maioria dos fundos em gradiente parece igual

As ferramentas de design, os geradores e os modelos oferecem todos a mesma lista curta de transições, e as tendências empurram toda a gente para os mesmos tons ao mesmo tempo. Violeta para rosa, azul para ciano e laranja para magenta são agradáveis, mas são tão usados que se leem como uma predefinição e não como uma escolha. O padrão mais amplo está explicado em porque é que todos os feeds parecem iguais.

Passo 1: escolhe uma base

A base é a cor sobre a qual o gradiente assenta e à qual regressa. Define o ambiente mais do que qualquer destaque. Uma base quase preta faz a cor brilhar e parece premium e noturna; uma base quente em branco sujo parece impressa, calma e editorial. Escolhe-a antes de escolher um único destaque e mantém-na em todo o conjunto de designs.

Se escolheres escuro, lê fundos em gradiente escuros antes de exportar, porque é nas transições escuras que as faixas mais se notam.

Passo 2: escolhe 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 tom mais claro e um destaque usado com parcimónia. Mantém as vizinhas próximas na roda das cores para que as transições fiquem limpas, e deixa o destaque à parte. Cores opostas lado a lado ficam cinzentas onde se encontram, como explicam os gradientes sujos.

Passo 3: dá-lhe um material

Uma transição digital limpa parece uma predefinição do ecrã. Um material fá-la parecer uma superfície. O grão lê-se como película ou impressão, a textura de papel como artesanato, um brilho vítreo como tecnologia e uma seda suave como luxo. Não é preciso muito: uma camada de ruído com pouca opacidade chega para mudar a sensação. A textura em gradientes compara as famílias, e os gradientes com grão têm o código.

Passo 4: planeia onde ficam as palavras

Um fundo existe para transportar algo: um título, um preço, uma data. Decide onde ficam essas palavras antes de acabar o gradiente e mantém essa zona mais calma e com mais contraste. Põe a cor mais clara e mais agitada longe do texto, normalmente num canto, e deixa a base aparecer por trás das palavras. Para as regras de contraste, vê contraste de cor e acessibilidade.

Passo 5: renderiza-o para cada formato

Um gradiente que fica bem numa publicação quadrada pode ficar mal numa story vertical, porque o corte move a zona clara. Trata o fundo como uma receita que renderizas em cada tamanho, ajustando onde a luz cai, e não como uma única imagem que cortas.

Publicação 1080×1350

1080 × 1350

Story 1080×1920

1080 × 1920

Imagem principal do site 1920×1080

1920 × 1080

Banner de blogue 1200×600

1200 × 600

Um fundo em gradiente em CSS

Na web, um gradiente de página inteira tem um erro clássico: se a página for curta, o fundo repete-se em faixas. Dá ao elemento raiz uma altura mínima, define uma cor lisa de reserva que também aparece ao deslizar para lá do limite, e depois sobrepõe 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 secção principal em vez de uma página inteira, as mesmas camadas funcionam na própria secção. Os fundos para a secção principal de um site tratam de dimensões e desempenho.

Ter o teu próprio fundo em gradiente

Mesmo um fundo feito com cuidado pode ser copiado e reutilizado. Na Gradiently, um fundo acabado é um Mark: uma receita de cores, materiais, luz, grão e movimento com exatamente um dono de cada vez. É renderizado em cada tamanho em que desenhas e abre espaço para as tuas palavras sozinho. Podes desenhar com qualquer Mark de graça e reservar um para o tornares teu.