Linear, radial, cónico e de malha: todos os tipos de gradiente

Há quatro tipos de gradientes principais: linear, radial, cónico e de malha. Os gradientes lineares mudam de cor ao longo de uma linha reta, os radiais espalham-se para fora a partir de um ponto, os cónicos rodam à volta de um centro como o ponteiro de um relógio e os de malha misturam vários pontos de cor ao mesmo tempo em duas dimensões. À volta deles há algumas variações úteis: gradientes repetidos, gradientes livres e o grão, que é uma textura aplicada por cima e não um tipo próprio.

Abaixo, cada tipo tem um exemplo ao vivo que podes copiar, uma nota sobre aquilo em que é bom e uma ligação para o seu guia completo. Se estás a começar do zero, o que é um gradiente explica primeiro as paragens, as posições e os espaços de cor.

Gradientes lineares

Um gradiente linear percorre uma linha reta num ângulo à tua escolha. Em CSS, a direção predefinida é de cima para baixo, 0deg aponta para cima e os ângulos rodam no sentido dos ponteiros do relógio, por isso 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 de forma limpa e sugere luz a cair de um dos lados.

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

Gradientes radiais

Um gradiente radial começa num ponto e espalha-se para fora como um círculo ou uma elipse. Tirar esse ponto do centro é o truque que o faz parecer luz: um brilho vindo do canto superior esquerdo lê-se como um candeeiro, um sol ou um realce numa superfície curva. Os gradientes radiais são também a base da maioria das vinhetas suaves e dos efeitos de foco de luz.

Usa gradientes radiais para brilhos, focos de luz, vinhetas, esferas e tudo o que deva parecer iluminado a partir de um ponto. Vê gradientes radiais para as palavras-chave de tamanho como closest-side e farthest-corner.

Gradientes cónicos

Um gradiente cónico muda de cor à medida que andas à volta de um ponto central, e não à medida que te afastas dele. Imagina o varrimento do ponteiro de um relógio. Isso torna-o a escolha natural para círculos cromáticos, gráficos circulares, anéis de carregamento e reflexos angulares como metal escovado ou o clarão de arco-íris numa folha holográfica.

Usa gradientes cónicos para círculos, gráficos, reflexos e iridescência. O guia completo é gradientes cónicos, e o efeito de folha está em gradientes holográficos.

Gradientes repetidos

Cada um dos três tipos CSS tem uma versão repetida. Em vez de esticar uma mistura por toda a forma, repete uma mistura curta vezes sem conta. Com paragens nítidas, isso dá-te riscas, anéis e raios de sol bem definidos, sem nenhum ficheiro de imagem.

Gradientes de malha e livres

Um gradiente de malha coloca cor em vários pontos de uma superfície e mistura-os todos em duas dimensões. O Illustrator chama à sua versão de pontos e grelha malha de gradiente e à versão mais solta gradiente de forma livre. Seja como for, o resultado não tem uma direção única, e é por isso que parece orgânico, como luz através da água ou tinta que escorreu. O CSS não tem um tipo de malha, mas podes imitá-lo 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%);
}

Usa gradientes de malha para fundos de destaque, papéis de parede, capas de álbuns e campos de marca que devam parecer vivos. As armadilhas, sobretudo a cor turva e as faixas, estão em gradientes de malha.

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 as misturas suaves podem mostrar nos ecrãs e dá à cor digital um ar impresso ou de película. Outros materiais, como papel, vidro e seda, fazem o mesmo trabalho com outra voz. Vê gradientes com grão para saber quanto juntar.

Que tipo de gradiente usar

Se queres um campo acabado, com cor, luz e grão já equilibrados, é isso que um Mark é, e podes criar com qualquer Mark do Mercado gratuitamente.