Linear, radial, cônico e mesh: todos os tipos de gradiente explicados

Existem quatro tipos de gradiente principais: linear, radial, cônico e mesh. Gradientes lineares mudam de cor ao longo de uma linha reta, gradientes radiais se espalham para fora a partir de um ponto, gradientes cônicos giram em torno de um centro como o ponteiro de um relógio e gradientes mesh misturam vários pontos de cor ao mesmo tempo em duas dimensões. Em volta deles há algumas variações úteis: gradientes repetidos, gradientes de forma livre e o grão, que é uma textura aplicada por cima e não um tipo próprio.

Abaixo, cada tipo ganha um exemplo ao vivo para copiar, uma nota sobre aquilo em que ele é bom e um link para o guia completo. Se você está começando do zero, o que é um gradiente explica antes as paradas, as posições e os espaços de cor.

Gradientes lineares

Um gradiente linear segue uma linha reta no ângulo que você escolher. No CSS, a direção padrão é de cima para baixo, 0deg aponta para cima e os ângulos giram no sentido horário, então 90deg vai da esquerda para a direita e 135deg vai do canto superior esquerdo para o inferior direito. É de longe o tipo mais comum, porque é previsível, preenche qualquer retângulo sem problemas e sugere luz vindo de um lado.

Use gradientes lineares em fundos de páginas e posts, botões, banners e tudo que precise se repetir ou escalar de forma previsível. A sintaxe e os detalhes estão em gradientes lineares em CSS, e a escolha da direção está em ângulo do gradiente.

Gradientes radiais

Um gradiente radial começa em um ponto e se espalha para fora como um círculo ou uma elipse. Tirar esse ponto do centro é o truque que faz parecer luz: um brilho vindo do canto superior esquerdo parece uma luminária, um sol ou um reflexo em uma superfície curva. Os gradientes radiais também são a base da maioria das vinhetas suaves e dos efeitos de holofote.

Use gradientes radiais para brilhos, holofotes, vinhetas, esferas e tudo que deva parecer iluminado a partir de um ponto. Veja gradientes radiais para as palavras-chave de tamanho, como closest-side e farthest-corner.

Gradientes cônicos

Um gradiente cônico muda de cor conforme você dá a volta em um ponto central, em vez de se afastar dele. Pense no giro do ponteiro de um relógio. Isso faz dele a escolha natural para círculos cromáticos, gráficos de pizza, anéis de carregamento e reflexos angulares como metal escovado ou o brilho arco-íris de um papel holográfico.

Use gradientes cônicos para círculos, gráficos, reflexos e iridescência. O guia completo é gradientes cônicos, e o visual de papel metalizado está em gradientes holográficos.

Gradientes repetidos

Cada um dos três tipos do CSS tem uma versão repetida. Em vez de esticar uma transição pela forma inteira, ela repete uma transição curta várias vezes. Com paradas secas, isso dá listras, anéis e raios de sol nítidos, sem nenhum arquivo de imagem.

Gradientes mesh e de forma livre

Um gradiente mesh coloca cor em vários pontos de uma superfície e mistura todos em duas dimensões. O Illustrator chama a versão com pontos e grade de malha de gradiente e a versão mais solta de gradiente de forma livre. De um jeito ou de outro, o resultado não tem uma direção única, e é por isso que parece orgânico, como luz atravessando a água ou tinta escorrida. O CSS não tem um tipo mesh, mas dá para simular um de forma convincente empilhando gradientes radiais suaves sobre uma cor de base.

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(at 18% 22%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 82% 18%, #0ea5e9 0px, transparent 50%),
    radial-gradient(at 70% 85%, #f472b6 0px, transparent 55%),
    radial-gradient(at 25% 80%, #14b8a6 0px, transparent 50%);
}

Use gradientes mesh em fundos de destaque, papéis de parede, capas de álbum e campos de marca que devem parecer vivos. As armadilhas, principalmente as cores lamacentas e o banding, estão em gradientes mesh.

Grão e textura: a camada por cima

O grão não é um tipo de gradiente, mas muda a leitura de todos os tipos. Uma camada fina de ruído esconde as faixas que transições suaves podem mostrar nas telas e deixa a cor digital com cara de impressa ou de filme. Outros materiais, como papel, vidro e seda, fazem o mesmo trabalho com outra voz. Veja gradientes granulados para saber quanto usar.

Qual tipo de gradiente usar

Se você quer um campo pronto, com cor, luz e grão já equilibrados, é isso que um Mark é, e você pode criar com qualquer Mark do Mercado de graça.