# Gradiente radial em CSS: formas, tamanhos e posições [Canonical HTML page](https://gradiently.design/pt-pt/guide/css-radial-gradient) O radial-gradient() desenha a cor a partir de um ponto para fora. Aqui está cada parte dele, com exemplos ao vivo, e os truques de camadas por trás de brilhos suaves, focos de luz e vinhetas. ## The short version - Um gradiente radial em CSS espalha a cor para fora a partir de um ponto central e escreve-se com a função radial-gradient() em qualquer sítio onde o CSS aceite uma imagem. - Por defeito, um gradiente radial é uma elipse, centrada na caixa e dimensionada para chegar ao canto mais afastado. - As palavras-chave de tamanho closest-side, closest-corner, farthest-side e farthest-corner decidem onde cai a última paragem de cor. - A palavra-chave at move o centro, por exemplo at 20% 30%, e as posições funcionam como o background-position. - Sobrepor vários gradientes radiais que se desvanecem até ficarem transparentes é a forma habitual de criar brilhos suaves e fundos do género malha em CSS. 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. Brilho âmbar, tudo por defeito: `radial-gradient(#fef3c7, #f59e0b 45%, #78350f)` Uma elipse, centrada, dimensionada para o canto mais afastado. É o que obténs quando só indicas cores. 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](https://gradiently.design/pt-pt/guide/css-mesh-gradient). Para o lado de design dos gradientes radiais, vê o guia complementar sobre [gradientes radiais](https://gradiently.design/pt-pt/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) ``` A forma e o tamanho podem vir por qualquer ordem. A posição vem sempre depois da palavra at. | Parte | Valores | Por defeito | | --- | --- | --- | | Forma | `circle` ou `ellipse` | `ellipse` | | Tamanho | uma palavra-chave, um comprimento para o círculo, ou dois comprimentos ou percentagens 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 hexadecimais | | Paragens de cor | duas ou mais cores com posições opcionais | obrigatórias | As partes do radial-gradient(). Só as paragens de cor são obrigatórias. 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()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/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. - Elipse: segue a caixa: `radial-gradient(ellipse, #a7f3d0, #059669 50%, #022c22)` - Círculo: mantém-se redondo: `radial-gradient(circle, #a7f3d0, #059669 50%, #022c22)` As mesmas paragens, de menta a verde-floresta. Num mosaico largo, a elipse abre-se 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 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%`. - 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 só sol, quatro tamanhos. O closest-side acaba na margem mais próxima; o farthest-corner, o valor por defeito, chega ao canto mais distante. 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. - 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)` Mudar o centro altera o ambiente mais do que mudar as cores. ## 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. ```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 manchas de violeta, rosa e azul-céu sobre um fundo quase preto. Muda uma posição e a composição inteira desloca-se. 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`. > **Os brilhos suaves criam faixas com facilidade** Os desvanecimentos radiais grandes e de baixo contraste sobre fundos escuros são onde os degraus se veem primeiro. Uma camada leve de ruído por cima esconde-os; vê [textura de ruído em CSS](https://gradiently.design/pt-pt/guide/css-noise-texture) e [faixas em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding). ## 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](https://gradiently.design/pt-pt/guide/css-patterns) tem 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)` Paragens duras com comprimentos fixos transformam um gradiente radial em anéis. ### Evita - Percentagens no tamanho de um círculo, que são inválidas - Brilhos fortes que acabam numa aresta dura porque a última paragem é opaca - Centrar todos os brilhos em 50% 50% - Cinco brilhos sobrepostos com a mesma força ### Faz - Comprimentos para círculos, percentagens para elipses - Desvanecer cada brilho para `transparent` - Pôr os brilhos fora do centro, perto dos cantos ou abaixo da margem - Um brilho dominante e um ou dois mais discretos ## FAQ ### Como faço um gradiente circular em CSS? Usa `radial-gradient(circle, cor1, cor2)`. Com `circle` a forma fica redonda; sem isso obténs uma elipse que estica com a caixa. ### Como movo o centro de um gradiente radial? Acrescenta `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 o `background-position`. ### O que significa farthest-corner? Dimensiona o gradiente para a última paragem de cor chegar ao canto da caixa mais afastado do centro. É o tamanho por defeito. ### Um gradiente radial circular pode usar um tamanho em percentagem? Não. Um círculo precisa de um único comprimento, como `200px`. As elipses podem usar duas percentagens, como `ellipse 60% 40%`. ### Como faço um efeito de brilho com gradientes CSS? Sobrepõe um ou mais valores `radial-gradient()` que se desvanecem de uma cor semitransparente para `transparent`, sobre uma `background-color` escura.