Gradiente radial em CSS: formas, tamanhos e posições

Um gradiente radial em CSS mistura cor para fora a partir de um ponto, como a luz que se espalha de uma lâmpada. Você o escreve com radial-gradient() e o usa onde o CSS aceitar uma imagem, normalmente no background-image. Sem opções, ele desenha uma elipse no meio da caixa que chega ao canto mais distante: radial-gradient(#fef3c7, #b45309) dá um centro pálido que brilha até um âmbar profundo.

Todo o resto da função muda uma de três coisas: a forma, o tamanho e a posição. Quando você controla essas três, a mesma função desenha brilhos, holofotes, vinhetas, raios de sol e as poças de cor por trás de um gradiente de malha em CSS. Para o lado de design das misturas radiais, veja o guia complementar sobre gradientes radiais.

A sintaxe do radial-gradient()

/* shape  size          position        stops */
radial-gradient(circle closest-side at 30% 40%, #fde047, #ea580c 60%, #1c1917)

/* everything before the first comma is optional */
radial-gradient(#fde047, #ea580c)

Uma regra pega muita gente: o tamanho de um círculo precisa ser um comprimento como 200px, nunca uma porcentagem, porque a porcentagem de um retângulo não tem um raio único. As elipses aceitam porcentagens, como em ellipse 60% 40%. A referência do MDN para o radial-gradient() lista a gramática completa.

Círculo ou elipse

A elipse se estica com a caixa: num banner largo o brilho é largo e num story alto ele é alto. O círculo continua redondo faça o que a caixa fizer. Use elipses em fundos que devem preencher o contêiner de modo uniforme e círculos para tudo que deva parecer uma fonte de luz, um planeta ou o brilho de um botão.

Palavras-chave de tamanho: de closest-side a farthest-corner

O tamanho decide onde cai a última parada de cor, que é onde fica a forma final do gradiente. As quatro palavras-chave medem do centro até o lado ou o canto mais próximo ou mais distante da caixa. Elas só parecem diferentes quando o centro está deslocado, por isso todos os exemplos abaixo partem de 30% 40%.

Na prática, o closest-side serve a formas contidas, como pontos e selos, porque a cor nunca escapa da borda mais próxima. O farthest-corner serve a fundos, porque a mistura cobre a caixa inteira. Quando precisar de controle exato, informe um comprimento: circle 180px at 50% 0 é um brilho de 180 pixels pendurado na borda superior.

Posicionando com at

A palavra-chave at posiciona o centro com os mesmos valores do background-position: palavras como at top right, porcentagens como at 20% 80% ou comprimentos como at 40px 60px. O centro pode até ficar fora da caixa, como em at 50% 120%, que dá um brilho de horizonte subindo de baixo da borda inferior.

Brilhos radiais em camadas

O padrão radial mais útil são vários gradientes empilhados num só background-image, cada um se dissolvendo em transparent, sobre uma cor escura chapada. Cada camada é uma poça de luz no seu próprio lugar. Como a primeira camada é pintada por cima, coloque primeiro o brilho mais forte e menor.

.glow {
  background-color: #0b0a1a;
  background-image:
    radial-gradient(circle at 20% 25%, rgb(124 58 237 / 0.55), transparent 45%),
    radial-gradient(circle at 80% 30%, rgb(236 72 153 / 0.45), transparent 40%),
    radial-gradient(ellipse at 50% 110%, rgb(56 189 248 / 0.4), transparent 60%);
}

Mais dois padrões cobrem quase todo o resto. Uma vinheta escurece as bordas: radial-gradient(ellipse, transparent 55%, rgb(0 0 0 / 0.55)) sobreposta a uma foto. Um holofote segue o ponteiro quando você alimenta a posição com propriedades personalizadas, como radial-gradient(circle 240px at var(--x) var(--y), rgb(255 255 255 / 0.15), transparent), com algumas linhas de JavaScript definindo --x e --y no pointermove.

Gradientes radiais repetidos

O repeating-radial-gradient() repete suas paradas para fora até a caixa ficar cheia, então um par de paradas duras vira anéis. Use comprimentos nas posições das paradas para que a largura do anel se mantenha. É a base de texturas de ondulação, de alvo e de meio-tom, e o guia de padrões CSS traz mais.