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

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

Tudo o resto na função altera uma de três coisas: a forma, o tamanho e a posição. Quando controlas estas três, a mesma função desenha brilhos, focos de luz, vinhetas, raios de sol e as manchas de cor por trás de um gradiente de malha em CSS. Para o lado de design dos gradientes radiais, vê 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 apanha muita gente: o tamanho de um círculo tem de ser um comprimento como 200px, nunca uma percentagem, porque a percentagem de um retângulo não tem um único raio. As elipses aceitam percentagens, como em ellipse 60% 40%. A referência da MDN para o radial-gradient() lista a gramática completa.

Círculo ou elipse

Uma elipse estica com a caixa, por isso num banner largo o brilho é largo e numa story alta é alto. Um círculo mantém-se redondo façam o que fizerem à caixa. Usa elipses para fundos que devem preencher o contentor de forma uniforme e círculos para tudo o 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 paragem de cor, ou seja, onde fica a forma final do gradiente. As quatro palavras-chave medem do centro até ao lado ou canto mais próximo ou mais afastado da caixa. Só parecem diferentes quando o centro está deslocado, por isso todos os exemplos abaixo começam em 30% 40%.

Na prática, o closest-side serve para formas contidas, como pontos e emblemas, porque a cor nunca passa da margem mais próxima. O farthest-corner serve para fundos, porque a mistura cobre a caixa toda. Quando precisares de controlo exato, indica um comprimento: circle 180px at 50% 0 é um brilho de 180 píxeis pendurado na margem superior.

Posicionar com at

A palavra-chave at coloca o centro com os mesmos valores do background-position: palavras como at top right, percentagens 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 a subir por baixo da margem inferior.

Brilhos radiais em camadas

O padrão radial mais útil são vários gradientes empilhados num só background-image, cada um a desvanecer para transparent, sobre uma cor escura lisa. Cada camada é uma mancha de luz no seu lugar. Como a primeira camada é pintada por cima, põe primeiro o brilho mais forte e mais pequeno.

.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 tudo o que falta. Uma vinheta escurece as margens: radial-gradient(ellipse, transparent 55%, rgb(0 0 0 / 0.55)) sobre uma fotografia. Um foco de luz segue o cursor quando lhe passas a posição por propriedades personalizadas, como radial-gradient(circle 240px at var(--x) var(--y), rgb(255 255 255 / 0.15), transparent), com poucas linhas de JavaScript a definir --x e --y no pointermove.

Gradientes radiais repetidos

O repeating-radial-gradient() repete as paragens para fora até a caixa ficar cheia, por isso um par de paragens duras torna-se anéis. Usa comprimentos nas posições das paragens para a largura dos anéis se manter constante. É a base de ondulações, alvos e texturas do género meios-tons, e o guia de padrões CSS tem mais.