Degradados cónicos CSS

Tabla de contenido

Degradados cónicos CSS

Un degradado cónico es un degradado con transiciones de color giradas alrededor de un punto central.

Para crear un degradado cónico debes definir al menos dos colores.

Sintaxis

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

De forma predeterminada, ángulo es 0 grados y posición es centro.

Si no se especifica ningún grado, los colores se distribuirán equitativamente alrededor el punto central.

Degradado cónico: tres colores

El siguiente ejemplo muestra un degradado cónico con tres colores:

Ejemplo

Un degradado cónico con tres colores:

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

Pruébelo usted mismo →

<!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>

Degradado cónico: cinco colores

El siguiente ejemplo muestra un degradado cónico con cinco colores:

Ejemplo

Un degradado cónico con cinco colores:

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

Pruébelo usted mismo →

<!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>

Degradado cónico: tres colores y grados

El siguiente ejemplo muestra un degradado cónico con tres colores y un grado para cada color:

Ejemplo

Un degradado cónico con tres colores y un grado para cada color:

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

Pruébelo usted mismo →

<!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>

Crear gráficos circulares

Simplemente agregue border-radius: 50% para que el degradado cónico parezca un pastel:

Ejemplo

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

Pruébelo usted mismo →

<!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>

Aquí hay otro gráfico circular con grados definidos para todos los colores:

Ejemplo

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

Pruébelo usted mismo →

<!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>

Degradado cónico con ángulo especificado

El [desde ángulo] especifica un ángulo en el que se forma todo el gradiente cónico. girado por.

El siguiente ejemplo muestra un gradiente cónico con un ángulo desde 90 grados:

Ejemplo

Un gradiente cónico con un ángulo desde:

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

Pruébelo usted mismo →

<!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>

Degradado cónico con posición central especificada

La [en posición] especifica el centro del gradiente cónico.

El siguiente ejemplo muestra un gradiente cónico con una posición central de 60% 45%:

Ejemplo

Un gradiente cónico con una posición central especificada:

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

Pruébelo usted mismo →

<!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>

Repetir un gradiente cónico

La función repeating-conic-gradient() se utiliza para repetir gradientes cónicos:

Ejemplo

Un gradiente cónico repetido:

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

Pruébelo usted mismo →

<!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>

Aquí hay un degradado cónico repetido con inicios y paradas de color definidos:

Ejemplo

Un degradado cónico repetitivo con inicios y finales de color definidos:

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

Pruébelo usted mismo →

<!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>

Funciones de degradado CSS

La siguiente tabla enumera las funciones de gradiente CSS:

conic-gradient(): Crea un gradiente cónico. Definir al menos dos colores (alrededor de un punto central)
linear-gradient(): Crea un degradado lineal. Definir al menos dos colores (de arriba a abajo)
radial-gradient(): Crea un degradado radial. Definir al menos dos colores (centro a bordes)
repeating-conic-gradient(): Repite un gradiente cónico
repeating-linear-gradient(): Repite un gradiente lineal
repeating-radial-gradient(): Repite un gradiente radial