Degradê de Cores: Como Criar um Gradiente Bonito

Para montar o seu enquanto lê, abra o criador de gradiente: ele mostra o resultado na hora e gera o código CSS.

Degradê ou Gradiente?

As duas palavras falam da mesma coisa: uma transição suave entre cores. “Degradê” vem do francês “dégradé” e é mais comum na moda, no cabelo e na decoração; “gradiente” é o termo do design e da programação, como no CSS. Num degradê, cada ponto onde uma cor aparece pura é uma parada (em inglês, “color stop”); entre as paradas, a tela calcula as cores intermediárias.

Os Tipos de Degradê

• Linear: as cores mudam em linha reta, numa direção definida pelo ângulo (0° de baixo para cima, 90° da esquerda para a direita). É o mais usado em fundos e botões. No CSS, linear-gradient().
• Radial: as cores partem de um ponto e se espalham em círculo ou elipse, como uma luz. Bom para dar profundidade e destacar o centro. No CSS, radial-gradient().
• Cônico: as cores giram em volta de um ponto, como numa roda de cores. No CSS, conic-gradient().

Como Criar um Degradê no Site

1. No criador de gradiente, escolha as cores e a posição de cada uma na faixa.
2. Escolha o tipo, linear ou radial, e o ângulo.
3. Copie o código CSS, baixe a imagem ou copie o link para compartilhar.

Para começar de exemplos prontos, veja os gradientes do site.

O Problema do Meio Acinzentado

Na tela, o degradê comum calcula as cores do meio pela média dos valores de RGB. Entre duas cores complementares, a média cai perto do cinza, e a transição parece “suja”. A tabela mostra a cor exata do meio de alguns pares, calculada pelo site:

Há três jeitos de evitar o meio cinza:

• Use cores vizinhas na roda de cores, como amarelo e laranja, ou azul e turquesa. A média de cores próximas continua viva.
• Acrescente uma cor intermediária. Entre azul e amarelo, passe pelo verde ou pelo turquesa; entre rosa e turquesa, pelo azul. O degradê vira uma volta pela roda, e não um atalho pelo cinza.
• Mude o espaço de cor. No CSS, os navegadores atuais aceitam linear-gradient(in oklch, …), que calcula o meio num espaço parecido com o LCH e mantém a saturação.

Exemplos de Degradês

Degradês prontos para copiar, dos mais buscados aos mais coloridos:

Dicas para um Degradê Bonito

• Poucas cores. Duas ou três bastam na maioria dos casos. Mais que isso costuma virar arco-íris, a não ser que seja essa a ideia.
• Varie a luminosidade, não só o matiz. Um degradê do escuro ao claro dá sensação de profundidade e de luz, como nos exemplos de preto, marrom e azul.
• Degradês sutis são mais versáteis. Uma variação pequena, como do azul-marinho a um azul um pouco mais claro, funciona como fundo de site sem disputar atenção com o conteúdo.
• Cuidado com as faixas. Em degradês longos e suaves, a tela pode mostrar faixas visíveis entre os tons (o “banding”). Encurtar a área do degradê, aumentar a diferença entre as cores ou aplicar uma textura leve disfarça o efeito.
• Texto sobre degradê. Confira o contraste na parte mais clara e na mais escura no verificador de contraste. Veja mais em contraste de cores e WCAG.

Onde Usar Degradês

Em sites e aplicativos, aparecem em fundos de seções, botões, capas e cartões. No design gráfico, em capas de redes sociais, cartazes e logotipos. Na decoração, o degradê aparece em paredes pintadas em faixas que vão do claro ao escuro, em tecidos e em cerâmicas; no cabelo e nas unhas, é o efeito ombré, palavra francesa para “sombreado”. Para escolher as cores, as paletas de cores do site são um bom ponto de partida: várias, como as escalas de azul e de verde, já estão em ordem de claro a escuro.