radial-gradient()

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

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

Using CSS gradients, repeating-radial-gradient, linear-gradient
Proposta original do WebKit: https://webkit.org/blog/175/introducing-css-gradients/
Nova implementação do WebKit: https://webkit.org/blog/1424/css3-gradients/