Função CSS conic-gradient()

Definição e uso

CSS conic-gradient(); A função define a transição cônica como imagem de fundo.

A transição cônica é uma transição de cor que gira em torno do ponto central (semelhante a um gráfico de pizza e um disco de cores).

Para criar uma transição cônica, é necessário definir pelo menos dois pontos de parada de cor.

Tem três cores, uma transição cônica:

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

Tem cinco cores, uma transição cônica:

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

Tem três cores e define um ângulo para cada cor, uma transição cônica:

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}

Ao adicionar border-radius: 50%, a transição cônica parece um gráfico de pizza:

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

Gradiente cônico com ângulo de início:

#grad {
  background-image: conic-gradient(de 90deg, red, yellow, green);
  border-radius: 50%;
}

Gradiente cônico com posição central:

#grad {
  background-image: conic-gradient(em 60% 45%, red, yellow, green);
  border-radius: 50%;
}

Gradiente cônico com ângulo de início e posição central:

#grad {
  background-image: conic-gradient(de 90deg em 60% 45%, red, yellow, green);
  border-radius: 50%;
}

Outro exemplo de gráfico de pizza:

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

background-image: conic-gradient([de Ângulo] Posição,] Grau de cor, Grau de cor, ... );

Valor	Descrição
de Ângulo	Opcional. A gradiente cônica inteira será girada neste ângulo. O valor padrão é 0deg.
em Posição	Opcional. Especifica a posição central da gradiente cônica. O valor padrão é center.
Grau de cor, ... , Grau de cor	Ponto de parada de cor é a cor que você deseja que seja apresentada entre transições suaves. Este valor é composto por valores de cor e posições de parada opcionais (ângulos entre 0 e 360 graus ou porcentagens entre 0% e 100%)

Valor

Descrição

de Ângulo

Opcional. A gradiente cônica inteira será girada neste ângulo. O valor padrão é 0deg.

em Posição

Opcional. Especifica a posição central da gradiente cônica. O valor padrão é center.

Grau de cor, ... , Grau de cor

Ponto de parada de cor é a cor que você deseja que seja apresentada entre transições suaves.

Este valor é composto por valores de cor e posições de parada opcionais (ângulos entre 0 e 360 graus ou porcentagens entre 0% e 100%)