Gradientes Cônicos CSS

Índice

Gradientes Cônicos CSS

Um gradiente cônico é um gradiente com transições de cores giradas em torno de um ponto central.

Para criar um gradiente cônico você deve definir pelo menos duas cores.

Sintaxe

background-image: conic-gradient([from angle] [at position,] color 
  [degree], color [degree], ...);

Por padrão, ângulo é 0 graus e posição é centro.

Se nenhum grau for especificado, as cores serão distribuídas igualmente ao redor o ponto central.

Gradiente Cônico: Três Cores

O exemplo a seguir mostra um gradiente cônico com três cores:

Exemplo

Um gradiente cônico com três cores:

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red, yellow, green);
}
</style>
</head>
<body>

<h1>Conic Gradient - Three Colors</h1>

<div id="grad1"></div>

</body>
</html>

Gradiente Cônico: Cinco Cores

O exemplo a seguir mostra um gradiente cônico com cinco cores:

Exemplo

Um gradiente cônico com cinco cores:

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red, yellow, green, blue, black);
}
</style>
</head>
<body>

<h1>Conic Gradient - Five Colors</h1>

<div id="grad1"></div>

</body>
</html>

Gradiente Cônico: Três Cores e Graus

O exemplo a seguir mostra um gradiente cônico com três cores e um grau para cada cor:

Exemplo

Um gradiente cônico com três cores e um grau para cada cor:

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
</style>
</head>
<body>

<h1>Conic Gradient - Defined degree for each color</h1>

<div id="grad1"></div>

</body>
</html>

Crie gráficos de pizza

Basta adicionar border-radius: 50% para fazer o gradiente cônico parecer uma torta:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - Pie Chart</h1>

<div id="grad1"></div>

</body>
</html>

Aqui está outro gráfico de pizza com graus definidos para todas as cores:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - Pie Chart</h1>

<div id="grad1"></div>

</body>
</html>

Gradiente cônico com ângulo especificado

O [from ângulo] especifica um ângulo em que todo o gradiente cônico é girado por.

O exemplo a seguir mostra um gradiente cônico com um ângulo inicial de 90 graus:

Exemplo

Um gradiente cônico com um ângulo inicial:

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - With a from angle</h1>

<div id="grad1"></div>

</body>
</html>

Gradiente cônico com posição central especificada

A [at posição] especifica o centro do gradiente cônico.

O exemplo a seguir mostra um gradiente cônico com uma posição central de 60% 45%:

Exemplo

Um gradiente cônico com uma posição central especificada:

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - With a specified center position</h1>

<div id="grad1"></div>

</body>
</html>

Repetindo um gradiente cônico

A função repeating-conic-gradient() é usada para repetir gradientes cônicos:

Exemplo

Um gradiente cônico repetido:

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Repeating a Conic Gradient</h1>

<div id="grad1"></div>

</body>
</html>

Aqui está um gradiente cônico repetido com início e fim de cor definidos:

Exemplo

Um gradiente cônico repetido com início e fim de cor definidos:

   #grad {
  background-image: 
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
  
    border-radius: 50%;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Repeating a Conic Gradient with color-starts and -stops</h1>

<div id="grad1"></div>

</body>
</html>

Funções de gradiente CSS

A tabela a seguir lista as funções de gradiente CSS:

conic-gradient(): Cria um gradiente cônico. Defina pelo menos dois cores (em torno de um ponto central)
linear-gradient(): Cria um gradiente linear. Defina pelo menos dois cores (de cima para baixo)
radial-gradient(): Cria um gradiente radial. Defina pelo menos dois cores (centro para bordas)
repeating-conic-gradient(): Repete um gradiente cônico
repeating-linear-gradient(): Repete um gradiente linear
repeating-radial-gradient(): Repete um gradiente radial