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

[Canonical HTML page](https://gradiently.design/pt-br/guide/css-radial-gradient)

O radial-gradient() desenha cor para fora a partir de um ponto. Aqui está cada parte dele, com exemplos ao vivo, mais os truques de camadas por trás de brilhos suaves, holofotes e vinhetas.

## The short version

- Um gradiente radial em CSS espalha cor para fora a partir de um ponto central e é escrito com a função radial-gradient() em qualquer lugar onde o CSS aceite uma imagem.
- Por padrão, um gradiente radial é uma elipse, centralizada na caixa e dimensionada para alcançar o canto mais distante.
- As palavras-chave de tamanho closest-side, closest-corner, farthest-side e farthest-corner decidem onde cai a última parada de cor.
- A palavra-chave at move o centro, por exemplo at 20% 30%, e as posições funcionam como no background-position.
- Sobrepor vários gradientes radiais que se dissolvem em transparente é a forma padrão de construir brilhos suaves e fundos parecidos com malha em CSS.

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.

Brilho âmbar, tudo no padrão: `radial-gradient(#fef3c7, #f59e0b 45%, #78350f)`

Uma elipse, centralizada, dimensionada até o canto mais distante. É o que você obtém quando informa só as cores.

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](https://gradiently.design/pt-br/guide/css-mesh-gradient). Para o lado de design das misturas radiais, veja o guia complementar sobre [gradientes radiais](https://gradiently.design/pt-br/guide/radial-gradient).

## A sintaxe do radial-gradient()

```css
/* 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)
```

Forma e tamanho podem vir em qualquer ordem. A posição sempre vem depois da palavra at.

| Parte | Valores | Padrão |
| --- | --- | --- |
| Forma | `circle` ou `ellipse` | `ellipse` |
| Tamanho | uma palavra-chave, um comprimento para o círculo ou dois comprimentos ou porcentagens para a elipse | `farthest-corner` |
| Posição | `at` seguido de qualquer valor que o `background-position` aceite | `at center` |
| Interpolação | `in oklab`, `in oklch` e outros espaços de cor | sRGB para cores hex |
| Paradas de cor | duas ou mais cores com posições opcionais | obrigatórias |

As partes do radial-gradient(). Só as paradas de cor são obrigatórias.

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()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/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.

- Elipse: acompanha a caixa: `radial-gradient(ellipse, #a7f3d0, #059669 50%, #022c22)`
- Círculo: continua redondo: `radial-gradient(circle, #a7f3d0, #059669 50%, #022c22)`

As mesmas paradas de menta a verde-floresta. Num ladrilho largo, a elipse se espalha para os lados e o círculo nã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%`.

- closest-side: `radial-gradient(circle closest-side at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- closest-corner: `radial-gradient(circle closest-corner at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- farthest-side: `radial-gradient(circle farthest-side at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- farthest-corner: `radial-gradient(circle farthest-corner at 30% 40%, #fde047, #ea580c 70%, #1c1917)`

Um sol, quatro tamanhos. O closest-side termina na borda mais próxima; o farthest-corner, que é o padrão, chega ao canto mais distante.

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.

- at top left: `radial-gradient(circle at top left, #c4b5fd, #6d28d9 45%, #1e1b4b)`
- at 50% 120%: horizonte: `radial-gradient(ellipse at 50% 120%, #fb7185, #9f1239 45%, #0f0a1e 75%)`
- at 80% 20%: `radial-gradient(circle at 80% 20%, #7dd3fc, #0369a1 35%, #082f49)`

Mover o centro muda o clima mais do que trocar as cores.

## 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.

```css
.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%);
}
```

Três poças de violeta, rosa e azul-céu sobre um fundo quase preto. Mude uma posição e a composição inteira se desloca.

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`.

> **Brilhos suaves fazem banding com facilidade** Gradientes radiais grandes e de baixo contraste sobre fundos escuros são onde os degraus aparecem primeiro. Uma camada leve de ruído por cima os esconde; veja a [textura de ruído em CSS](https://gradiently.design/pt-br/guide/css-noise-texture) e o [banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding).

## 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](https://gradiently.design/pt-br/guide/css-patterns) traz mais.

- Anéis azul-marinho: `repeating-radial-gradient(circle at 50% 50%, #0f172a 0 10px, #1e3a8a 10px 20px)`
- Ondulações de canto: `repeating-radial-gradient(circle at 0 100%, #fef3c7 0 6px, #f59e0b 6px 9px, #fef3c7 9px 18px)`

Paradas duras em comprimentos fixos transformam um gradiente radial em anéis.

### Evite

- Porcentagens no tamanho de um círculo, que são inválidas
- Brilhos fortes que terminam numa borda dura porque a última parada é opaca
- Centralizar todos os brilhos em 50% 50%
- Cinco brilhos sobrepostos com a mesma força

### Faça

- Comprimentos para círculos, porcentagens para elipses
- Dissolver cada brilho em `transparent`
- Posicionar os brilhos fora do centro, perto dos cantos ou abaixo da borda
- Um brilho dominante e um ou dois mais discretos

## FAQ

### Como faço um gradiente circular em CSS?

Use `radial-gradient(circle, cor1, cor2)`. Escrever `circle` mantém a forma redonda; sem isso você obtém uma elipse que se estica com a caixa.

### Como movo o centro de um gradiente radial?

Acrescente `at` e uma posição depois da forma e do tamanho, por exemplo `radial-gradient(circle at 20% 30%, #c4b5fd, #1e1b4b)`. As posições funcionam como no `background-position`.

### O que significa farthest-corner?

Ele dimensiona o gradiente para que a última parada de cor chegue ao canto da caixa mais distante do centro. É o tamanho padrão.

### Um gradiente radial circular pode usar tamanho em porcentagem?

Não. O círculo precisa de um único comprimento, como `200px`. As elipses podem usar duas porcentagens, como `ellipse 60% 40%`.

### Como faço um efeito de brilho com gradientes CSS?

Sobreponha um ou mais valores `radial-gradient()` que vão de uma cor semitransparente a `transparent`, sobre um `background-color` escuro.