Um gradiente CSS pode ter mais de duas cores?

Sim. Um gradiente é definido por uma lista de pontos de parada (color stops), cada um com cor e posição percentual próprias — não só cor inicial e final. Múltiplos pontos de parada permitem transições em várias etapas dentro do mesmo gradiente.

Por que 0deg num gradiente CSS aponta para cima, não para a direita como em trigonometria?

É uma convenção específica do CSS, diferente da convenção matemática de ângulo padrão. 0deg aponta para cima e o valor aumenta no sentido horário (90deg para a direita, 180deg para baixo) — mais parecido com a direção de ponteiros de relógio do que com coordenadas cartesianas.

Um gradiente CSS é mais leve para a página do que uma imagem de fundo com o mesmo efeito visual?

Sim, na maioria dos casos. Um gradiente CSS é computado pelo motor de renderização do navegador sem exigir download de arquivo, enquanto uma imagem de gradiente (PNG/JPEG) adiciona uma requisição HTTP e o peso do arquivo — além de perder nitidez em telas de resolução muito alta, ao contrário do gradiente CSS, que é sempre nítido.

Gerador de Gradiente CSS

Monte um gradiente CSS visualmente e copie o código pronto.

Tipo

Ângulo (graus)

Cor 1

Cor 2

Documentação técnica

Gradiente CSS: pontos de parada, não só "cor A vira cor B"

Um gradiente CSS (linear-gradient()) não é definido apenas pela cor inicial e final — é definido por uma lista de pontos de parada (color stops), cada um com uma cor e uma posição percentual ao longo do eixo do gradiente. Com apenas dois pontos (0% e 100%), o resultado é uma transição simples entre duas cores; adicionar um terceiro ponto de parada no meio (por exemplo, uma cor intermediária em 50%) cria uma transição em duas etapas dentro do mesmo gradiente — é essa flexibilidade de múltiplos pontos que permite efeitos mais complexos do que "de A para B", como simular um degradê com três ou mais tons, ou criar uma faixa de cor sólida seguida de transição (dois pontos de parada com a mesma cor em posições diferentes produzem um segmento sem transição visível).

Ângulo do gradiente: graus, não posições cardeais

O ângulo de um gradiente linear é medido em graus, com uma convenção específica que difere da intuição geométrica comum: 0deg aponta para cima (não para a direita, como seria a convenção matemática padrão de ângulo), e o valor aumenta no sentido horário — 90deg aponta para a direita, 180deg para baixo. Essa convenção específica do CSS (herdada de como relógios marcam direção, não de coordenadas cartesianas matemáticas) é uma fonte comum de confusão para quem espera que 0deg corresponda ao eixo horizontal, como em trigonometria.

Uso em performance: gradiente CSS vs. imagem de fundo

Um gradiente definido em CSS é computado pelo motor de renderização do navegador em tempo real, sem exigir download de nenhum arquivo de imagem — diferente de um gradiente "desenhado" como PNG/JPEG e aplicado como imagem de fundo, que adiciona uma requisição HTTP e o peso do arquivo à página. Para qualquer gradiente que possa ser expresso puramente por cores e direção (a maioria dos casos de design de interface), usar CSS nativo é estritamente mais leve e mais nítido em qualquer resolução de tela — a mesma vantagem de "vetor sobre raster" já discutida na página do Gerador de Imagem Placeholder deste site, aplicada aqui especificamente a gradientes.