Gradiente Radial do CSS

Gradiente Radial do CSS

O gradiente radial é definido pelo seu centro.

Para criar um gradiente radial, você também deve definir pelo menos dois pontos de cor.

Sintaxe

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

por padrão,shape por uma elipse,size pelo canto mais distante,position centrado.

Gradiente radial - pontos de cor uniformemente espaçados (padrão)

O exemplo a seguir mostra um gradiente radial com pontos de cor uniformemente espaçados:

Exemplo

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

Experimente você mesmo

Gradiente radial - pontos de cor com intervalos diferentes

O exemplo a seguir mostra um gradiente radial com intervalos diferentes entre os pontos de cor:

Exemplo

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

Experimente você mesmo

Definindo a forma

shape Os parâmetros definem a forma. Ele pode aceitar os valores circle ou ellipse. O valor padrão é ellipse (elipse).

O exemplo a seguir mostra um gradiente radial circular:

Exemplo

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

Experimente você mesmo

Usando keywords de tamanho diferentes

size Os parâmetros definem o tamanho do gradiente. Ele pode aceitar quatro valores:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Exemplo

Definindo gradientes radiais com diferentes keywords de size:

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

Experimente você mesmo

Gradiente radial repetido

repeating-radial-gradient() A função é usada para gradiente radial repetido:

Exemplo

Gradiente radial repetido:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Experimente você mesmo

Propriedade de gradiente CSS

A tabela a seguir lista as propriedades de gradiente CSS:

Atributo Descrição
background-image Definir uma ou mais imagens de fundo para um elemento.