O que é um gradiente? Um guia simples sobre misturas de cor

O que é um gradiente? Em design, um gradiente é uma mudança suave e gradual de uma cor para outra ao longo de uma superfície, como um azul profundo a derreter-se em violeta num cartaz. Onde um preenchimento liso pinta todos os píxeis da mesma cor, um gradiente dá a cada ponto a sua cor, calculada a partir de algumas cores que escolhes e do sítio onde as pões. Essa pequena mudança é a razão pela qual um gradiente pode parecer luz, ar ou profundidade, e também a razão pela qual é fácil fazê-lo parecer barato.

Esta página trata das partes de que todo o gradiente é feito, dos principais tipos, de onde se usam os gradientes e de porque voltaram. Cada secção tem uma ligação para um guia mais aprofundado quando quiseres o pormenor.

As partes de um gradiente

Todos os gradientes, desenhados numa ferramenta de design, escritos em CSS ou renderizados por um motor de jogo, resumem-se aos mesmos poucos ingredientes. Quando os souberes nomear, consegues descrever qualquer gradiente com precisão suficiente para outra pessoa o reconstruir.

As posições das paragens importam tanto como as cores. Move a paragem do meio de 50% para 65% e as mesmas três cores contam outra história: mais sombra, um nascer do sol mais tardio. Se queres perceber a direção em pormenor, lê para que lado deve ir um gradiente.

Gradientes suaves e em degraus

Um gradiente suave mistura de forma contínua entre paragens. Um gradiente em degraus, ou de paragens nítidas, põe duas paragens na mesma posição, por isso a cor salta em vez de se misturar. As paragens nítidas fazem riscas, bandeiras, barras de progresso e pores do sol retro; continuam a ser gradientes, só com a mistura desligada nesses pontos.

Os gradientes suaves têm um ponto fraco: os ecrãs mostram um número limitado de tons, por isso uma mistura muito suave pode partir-se em riscas visíveis. Esse problema tem o seu próprio guia, faixas nos gradientes.

Os principais tipos de gradiente

O tipo é a forma do caminho que a cor percorre. Quatro tipos cobrem quase tudo o que vais encontrar, e tipos de gradientes mostra cada um com código ao vivo.

• Linear: a cor muda ao longo de uma linha reta num ângulo. O cavalo de batalha para fundos, botões e banners. Vê gradientes lineares em CSS.
• Radial: a cor espalha-se para fora a partir de um ponto, num círculo ou numa elipse, como um foco de luz ou um brilho. Vê gradientes radiais.
• Cónico: a cor roda à volta de um ponto central, como o ponteiro de um relógio. Bom para círculos cromáticos, gráficos circulares e reflexos. Vê gradientes cónicos.
• De malha: vários pontos de cor misturam-se em duas dimensões ao mesmo tempo, por isso o resultado parece orgânico e pictórico. Vê gradientes de malha.

Como as cores se misturam: a parte que as pessoas saltam

Entre duas paragens, o software tem de inventar todas as cores intermédias. A forma como o faz depende do espaço de cor. A maioria das ferramentas e o CSS mais antigo misturam em sRGB, que combina os valores de vermelho, verde e azul em linha reta. É rápido, mas pode passar por cinzentos baços, sobretudo entre cores opostas como o azul e o amarelo.

Espaços de cor mais recentes, como o OKLab e o OKLCH, são construídos à volta da forma como as pessoas percebem a luminosidade e o tom, por isso as misturas ficam mais vivas e uniformes. Em CSS podes pedi-los diretamente, e a diferença vê-se com facilidade. A história completa, e as soluções, estão em gradientes turvos.

.sky {
  /* default: blended in sRGB, passes through grey */
  background: linear-gradient(90deg, #0000ff, #ffff00);
}

.sky-better {
  /* blended in OKLCH, travels round the hue wheel through teal */
  background: linear-gradient(90deg in oklch, #0000ff, #ffff00);
}

Onde se usam os gradientes

Os gradientes merecem o lugar sempre que uma superfície precisa de parecer iluminada ou viva sem acrescentar uma fotografia. Os trabalhos mais comuns são fundos para publicações e sites, ícones de aplicações, botões e destaques em interfaces, embalagens, cartazes e identidades de marca que usam uma mistura como outras marcas usam uma só cor. Para o lado da identidade, vê branding com gradientes.

Porque é que os gradientes voltaram

Os gradientes estavam em todo o lado nas interfaces brilhantes dos anos 2000 e depois caíram em desuso quando o design plano tomou conta dos ecrãs no início da década de 2010. Voltaram numa forma mais discreta: menos biséis e reflexos falsos, mais misturas suaves de duas ou três cores. Os ecrãs de alta resolução ajudaram, porque a cor suave fica melhor em ecrãs densos, e as marcas à procura de algo mais distintivo do que um só tom liso encontraram espaço nas misturas. A visão longa está em a história dos gradientes.

Hoje, os gradientes mais interessantes vão além da cor. O grão, a textura e o movimento lento fazem uma mistura parecer um material e não uma predefinição, que é o tema de gradientes com grão e textura de gradiente.

Se preferires partir de uma mistura acabada em vez de a construíres do zero, o Mercado tem milhares de Marks: receitas completas de gradiente com cor, material, grão e luz com que podes criar gratuitamente.