Função CSS repeating-conic-gradient()

Definição e uso

CSS repeating-conic-gradient() A função é usada para repetir o gradiente cônico.

Gradiente cônico	Gradiente cônico repetido

conic-gradient(red, yellow);	repeating-conic-gradient(red 10%, yellow 20%);

Um gradiente cônico repetido:

#grad {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
}

Define o gradiente cônico repetido com o ponto de início e de fim das cores:

#grad {
  background-image: repeating-conic-gradient(red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

Outro gradiente cônico repetido que define o ângulo de início e a posição central:

#grad1 {
  background-image: repeating-conic-gradient(from 10deg at 30% 30%, red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

repeating-conic-gradient([from ângulo], [at posição,] grau de cor, grau de cor, ... );

Valor	Descrição
from ângulo	Opcional. A gradiente cônica inteira gira neste ângulo. O valor padrão é 0deg.
at posição	Opcional. Especifica o ponto central da gradiente cônica. O valor padrão é center.
grau de cor, ... , grau de cor	O ponto de terminação da cor é a cor que você deseja apresentar uma transição suave entre ela. Este valor é composto por valores de cor e um ou dois pontos de parada opcionais (ângulos entre 0 e 360 graus ou porcentagens entre 0% e 100%)

Valor

Descrição

from ângulo

Opcional. A gradiente cônica inteira gira neste ângulo.

O valor padrão é 0deg.

at posição

Opcional. Especifica o ponto central da gradiente cônica.

O valor padrão é center.

grau de cor, ... , grau de cor

O ponto de terminação da cor é a cor que você deseja apresentar uma transição suave entre ela.

Este valor é composto por valores de cor e um ou dois pontos de parada opcionais (ângulos entre 0 e 360 graus ou porcentagens entre 0% e 100%)