Función CSS conic-gradient()

CSS 函数Funciones CSS

Ejemplo

Gradiente cónico de tres colores:

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

Pruébalo »

Definición y uso

La función conic-gradient() crea una imagen compuesta por un gradiente.

El gradiente cónico es una transición de color que rota alrededor de un punto central (en lugar de irradiar desde el centro hacia afuera).

Para crear un gradiente cónico, se requieren al menos dos paradas de color.

Ejemplo de gradiente cónico:

En la figura se puede ver la dirección del gradiente y el punto de inicio del gradiente cónico. El punto de inicio es el centro de la figura, y luego el efecto de gradiente se realiza alrededor del centro en el sentido de las agujas del reloj.
Versión: CSS3

Soporte del navegador

Los números en la tabla indican la primera versión del navegador que admite esta función.

Función
conic-gradient() 69.0 79.0 83.0 12.1 56.0

Sintaxis de CSS

background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);
Valor Descripción
from angle Opcional. Ángulo de inicio. El valor predeterminado es 0deg.
at position Opcional. Posición del centro. Centrado por defecto.
color degree, ..., color degree Parada del gradiente angular. Este valor contiene un valor de color seguido de una posición de parada opcional (grados entre 0 y 360, o porcentajes entre 0% y 100%).

Más ejemplos

Ejemplo

Gradiente cónico de cinco colores:

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

Pruébalo »

Ejemplo

Gradiente cónico de tres colores, configurando los grados de cada gradiente:

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

Pruébalo »

Ejemplo

Mediante la configuración deborder-radius: 50%Convierta el gradiente cónico en un círculo:

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

Pruébalo »

Ejemplo

Configurar el ángulo de inicio:

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

Pruébalo »

Ejemplo

Especificar la posición del centro:

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

Pruébalo »

Ejemplo

Especificar una posición y configurar un ángulo:

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

Pruébalo »

Ejemplo

Un gráfico circular:

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

Pruébalo » 
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);

Análisis del código:

  • red 0deg, red 90degIndica que se usa rojo (red) en el intervalo de 0 a 90 grados.
  • yellow 90deg, yellow 180degIndica que se usa amarillo (yellow) en el intervalo de 90 a 180 grados.
  • green 180degIndica que se usa verde (green) en el intervalo de 180 a 360 grados.

Ejemplo

Crear una tarjeta de selección de color:

#grad { background: radial-gradient(closest-side, gray, transparent), conic-gradient(red, magenta, blue, aqua, lime, yellow, red); border-radius: 50%; }

Pruébalo »

CSS 函数Funciones CSS

Otras extensiones