Função radial-gradient
A função radial-gradient define um gradiente
radial. Esta função é aplicada a propriedades que
definem uma imagem de fundo: background,
background-image
ou uma imagem de borda: border-image,
background-image-source.
Sintaxe
seletor {
background: radial-gradient([forma tipo posição], cor1 tamanho1, cor2 tamanho2...);
}
Valores
| Valor | Descrição |
|---|---|
| forma |
Valores aceitos:
ellipse gradiente elíptico (padrão),
circle gradiente circular.
|
| tipo |
Define a extensão do gradiente.
Valores aceitos:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| posição |
Após a palavra-chave at
é especificada uma posição em quaisquer unidades de tamanho
ou usando as palavras-chave top, bottom,
left, right, center
em várias combinações.
|
| cor1 | Cor inicial do gradiente em quaisquer unidades de cor. |
| cor2 | Cor final do gradiente em quaisquer unidades de cor. |
| tamanho | Define a extensão de uma cor específica do gradiente em quaisquer unidades de tamanho. |
Valores para tipo
| Valor | Descrição |
|---|---|
closest-side |
A forma do gradiente coincide com o lado mais próximo do bloco. |
closest-corner |
A forma do gradiente é calculada com base na informação da distância até o canto mais próximo do bloco. |
farthest-side |
O gradiente se estende até o lado mais distante do bloco. |
farthest-corner |
A forma do gradiente é calculada com base na informação da distância até o canto mais distante do bloco. |
Observação
O tipo e a forma podem ser trocados, mas a posição deve vir no final do primeiro parâmetro. O tipo de gradiente e seu tamanho não funcionam um com o outro (logicamente, pois eles entram em conflito). O tamanho prevalece.
Exemplo . A variante mais simples
Vamos simplesmente definir a cor inicial e a cor final:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Exemplo . Adicionando posição
Vamos definir a posição do centro:
30px - recuo à esquerda, 100px - recuo superior:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Exemplo . Posição em porcentagem
Vamos definir a posição do centro em porcentagem:
30% - recuo à esquerda, 50% - recuo superior:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Exemplo . Posição por palavra-chave
Podem ser usadas as palavras-chave
top, bottom, left,
right, center em várias
combinações. Vamos colocar, por exemplo, o gradiente
à direita e centralizado:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Exemplo . Tamanho do gradiente
Neste caso, o gradiente funcionará assim:
de 0px a 20px será cor
vermelha pura, de 20px a 60px - gradiente
de vermelho para azul, após 60px - cor
azul pura:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Exemplo . Várias cores em sequência
Neste caso, o gradiente funcionará assim:
de 0px a 20px será cor
vermelha pura, de 20px a 40px
será cor azul pura, de 40px
a 60px - gradiente de azul para verde,
após 60px - cor verde pura:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Exemplo . Tamanho + posição
Vamos definir simultaneamente os tamanhos para cores diferentes e a posição do centro do gradiente:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Exemplo . Forma do gradiente
A forma do gradiente é definida pelo primeiro parâmetro
e pode aceitar 2 valores: circle
(gradiente circular) ou ellipse (gradiente
elíptico, padrão). Por que então até agora
não vimos gradientes elípticos, embora
seja o padrão? Porque até agora
a forma dos blocos era quadrada. Se mudarmos
a forma para retangular, veremos o gradiente elíptico:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Exemplo . Gradiente circular
Vamos fazer um gradiente circular em um bloco
retangular. Para isso, definiremos a forma do gradiente
como primeiro parâmetro usando a palavra-chave
circle:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Exemplo . Adicionando posição
Vamos adicionar também a posição do gradiente ao código anterior:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Exemplo . Tipo farthest-corner + circle
A forma do gradiente é calculada com base na informação da distância até o canto mais distante do bloco:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemplo . Tipo farthest-corner + ellipse
A forma do gradiente é calculada com base na informação da distância até o canto mais distante do bloco:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemplo . Tipo farthest-side + circle
O gradiente se estende até o lado mais distante do bloco:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemplo . Tipo farthest-side + ellipse
O gradiente se estende até o lado mais distante do bloco:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemplo . Tipo closest-corner + circle
A forma do gradiente é calculada com base na informação da distância até o canto mais próximo do bloco:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemplo . Tipo closest-corner + ellipse
A forma do gradiente é calculada com base na informação da distância até o canto mais próximo do bloco:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemplo . Tipo closest-side + circle
A forma do gradiente coincide com o lado mais próximo do bloco:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemplo . Tipo closest-side + ellipse
A forma do gradiente coincide com o lado mais próximo do bloco:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Veja também
-
a função
linear-gradient,
que cria um gradiente linear -
a função
repeating-linear-gradient,
que cria um gradiente linear repetitivo -
a função
repeating-radial-gradient,
que cria um gradiente radial repetitivo
