We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 Images Module Level 3
The definition of 'radial-gradients()' in that specification.
Candidata a Recomendação  

Compatibilidade de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,