Função CSS radial-gradient()

Página anterior Função pow() do CSS
Próxima página Função ray() do CSS
Voltar à página anterior Manual de Função CSS

Definição e uso

CSS radial-gradient() A função define o gradiente radial como imagem de fundo.

O gradiente radial é definido pelo seu centro.

Para criar um gradiente radial, é necessário definir pelo menos duas cores.

Exemplo de gradiente radial:

Exemplo

Exemplo 1

Distribuição uniforme de cores no gradiente radial:

#grad {
  background-image: radial-gradient(red, green, blue);
}

Experimente você mesmo

Exemplo 2

Distribuição de cores em gradiente radial diferente:

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

Experimente você mesmo

Exemplo 3

Gradiente radial de forma circular:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Experimente você mesmo

Exemplo 4

Uso de palavras-chave de diferentes tamanhos para gradientes radiais:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

Experimente você mesmo

Sintaxe CSS

radial-gradient(shape size at position, start-color, ... , last-color);

Valor	Descrição
shape	Define a forma do gradiente. Os valores possíveis são: ellipse (padrão) circle
size	Define o tamanho do gradiente. Os valores possíveis são: farthest-corner (padrão) closest-side closest-corner farthest-side
position	Define a posição do gradiente. O valor padrão é "center".
start-color, ... , last-color	As cores marcadoras são as cores que você deseja que sejam apresentadas entre elas com transição suave. Este valor é composto por um valor de cor, seguido de uma ou duas posições de cores marcadoras opcionais (porcentagem entre 0% e 100% ou comprimento ao longo do eixo de gradiente).