MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Resumo

A função do CSS radial-gradient() cria uma <image> que representa um gradiente de cores irradiando de uma origem, o centro do gradiente. O resultado dessa função é um objeto do CSS do tipo <gradient>.

Gradientes radiais são definidos pelo seu centro, o contorno e a posição da forma de fechamento (ending shape) e as paradas de cor (color stops). O gradiente radial consiste de formas concêntricas uniformemente escaladas partindo do centro até sua forma de fechamento, indo potencialmente além, com a mesma forma da forma de fechamento. As paradas de cor são posicionadas num raio de gradiente virtual saindo do centro horizontalmente para a direita. O posicionamento das porcentagens das paradas de cor são relativas à interseção entre a forma de fechamento e esse raio de gradiente representando 100%. Cada forma é monocromática e a cor, definida pela cor no raio de gradiente que intersecta.

Formas de fechamento podem ser apenas círculo (circle) ou elipse (ellipse).

Como qualquer outro gradiente, um gradiente radial do CSS não é uma <cor> do CSS, mas uma imagem sem dimensões intrínsecas, i. e. uma imagem sem tamanho natural ou preferencial, tampouco proporção. Seu tamanho concreto será idêntico ao tamanho do elemento ao qual for aplicado.

A função radial-gradient não permite criar gradientes repetitivos. Para esse efeito, use a função do CSS repeating-radial-gradient.

Sintaxe

Gramática formal: radial-gradient( [ circle || <length> ] [ at <position> ]? ,
| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,
| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,
| at <position> ,
<color-stop> [ , <color-stop> ]+ )

Valores

<position>
Uma <position>, interpretada da mesma forma que background-position ou transform-origin. Se omitida, assume o padrão center.
<shape>
A forma do gradiente. Esse valor é circle (indicando que a forma do gradiente é um círculo com raio constante) ou ellipse (indicando que a forma é uma elipse com os eixos alinhados ao elemento). O valor padrão é ellipse.
<size>
O tamanho do gradiente. Essa valor é uma das Restrições de tamanho listada abaixo.
<color-stop>
Representando uma cor fixa num determinado ponto, esse valor é composto por um valor <color>, seguido de uma posição de parada opcional (uma <percentage> ou uma <length> referente ao raio de gradiente virtual). Uma porcentagem de 0%, ou um tamanho de 0 representa o centro do gradiente e o valor 100% a interseção da forma de fechamento com o raio de gradiente virtual. Valores de porcentagem intermediários são posicionados linearmente no raio de gradiente.
<extent-keyword>
Palavras-chave descrevendo quão grande a forma de fechamento deve ser. Os possíveis valores são:
Constante Descrição
closest-side A forma de fechamento do gradiente encontra o lado do elemento mais próximo ao seu centro (para círculos) ou encontra ambos os lados vertical e horizontal mais próximos ao centro (para elipses).
closest-corner A forma de fechamento do gradiente tem o tamanho exato para encontrar o canto da caixa mais próximo ao seu centro.
farthest-side Similar ao closest-side, mas a forma de fechamento fica com o tamanho necessário para encontrar o lado do elemento mais distante do centro do gradiente (ou lados vertical e horizontal).
farthest-corner A forma de fechamento do gradiente tem o tamanho exato para encontrar o canto da caixa mais distante de seu centro.
Rascunhos preliminares incluiam outras palavras-chave (cover e contain) como sinônimos dos valores do padrão farthest-corner e closest-side respectivamente. Use somente os valores do padrão, uma vez que algumas implementações podem já ter removido suporte a esses valores mais antigos.

Exemplos

ellipse farthest-corner
background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
470px 47px
background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%);
farthest-corner
background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);
16px radius fuzzy circle
background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);

Especificações

Especificação Status Comentários
CSS Image Values and Replaced Content Module Level 3
The definition of 'radial-gradients()' in that specification.
Candidate Recommendation  

Compatibilidade de navegadores

Funcionalidade Firefox (Gecko) Chrome Internet Explorer Opera Safari
Suporte básico (suporte à função radial-gradient(), mas não necessariamente com a sintaxe final) 3.6 (1.9.2)-moz [3]
16 (16)
10.0 (534.16)-webkit [2][3] 10.0 [1] 11.60-o 5.1-webkit[2]
Sintaxe legada do webkit Não suportado 3-webkit [2] Não suportado Não suportado 4.0-webkit [2]
Sintaxe at (sintaxe do padrão final) 10 (10)-moz [3]
16 (16)
Não suportado 10.0 11.60-o [3]
Presto 2.12 will remove the prefix.
Não suportado
Funcionalidade Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte básico (suporte à função radial-gradient(), mas não necessariamente com a sintaxe final) (Yes) 1.0 (1.9.2)-moz [3]
16.0 (16)
(Yes) (Yes) (Yes)
Sintaxe legada do webkit ? Não suportado ? ? ?
Sintaxe at (sintaxe do padrão final) ? 10.0 (10)-moz [3]
16.0 (16)
? ? ?

[1] Internet Explorer 5.5 a 9.0 suportam a funcionalidade proprietária filter: progid:DXImageTransform.Microsoft.Gradient() filter.

[2] WebKit desde 528 suporta a função legada -webkit-gradient(radial,…). Veja também o suporte atual para gradientes radiais.

[3] Firefox 3.6 e Webkit implementaram uma sintaxe anterior, prefixada.

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: Sebastianz, mrstork, srsaude
 Última atualização por: Sebastianz,