Gradientes cónicos en CSS

Gradientes cónicos

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

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

Sintaxis

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

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

Si no se especifica ningún grado, los colores se distribuirán por igual alrededor del punto central.

Gradiente 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);
}

Ver ejemplo

Gradiente 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);
}

Ver ejemplo

Gradiente 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);
}

Ver ejemplo

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%;
}

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%;
}

Ver ejemplo

Gradiente cónico con ángulo desde especificado

El [from angle] especifica un ángulo por el que gira todo el gradiente cónico.

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);
}

Ver ejemplo

Gradiente cónico con posición central especificada

La [at position] 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);
}

Ver ejemplo

Repetición de un gradiente cónico

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

Ejemplo:

Un gradiente cónico repetitivo:

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

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

Ejemplo:

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

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

Ver ejemplo

Todas las funciones de gradiente

La siguiente tabla enumera las funciones de degradado de CSS:

Función	Descripción
`conic-gradient()`	Crea un degradado cónico. Defina al menos dos colores (alrededor de un punto central).
`linear-gradient()`	Crea un degradado lineal. Defina al menos dos colores (de arriba a abajo).
`radial-gradient()`	Crea un degradado radial. Defina al menos dos colores (del centro a los bordes).
`repeating-conic-gradient()`	Repite un gradiente cónico.
`repeating-linear-gradient()`	Repite un degradado lineal.
`repeating-radial-gradient()`	Repite un degradado radial.

Resumen

Este artículo describe cómo crear gradientes cónicos en CSS, que son degradados con transiciones de color giradas alrededor de un punto central. Se pueden definir al menos dos colores y se pueden especificar grados y posiciones. También se puede repetir un gradiente cónico y se proporciona una tabla de todas las funciones de gradiente de CSS.

Traducido con 💚 desde W3Schools.com

CSS Conic Gradients

Contenido original de W3Schools

Table of contents