Función CSS conic-gradient()
Ejemplo
Un degradado cónico con tres colores:
#grad {
background-image: conic-gradient(red, yellow,
green);
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La función conic-gradient() establece un degradado cónico como imagen de fondo.
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 paradas de color.
Ejemplo de gradiente cónico:
Versión: | CSS3 |
---|
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la función.
Function | |||||
---|---|---|---|---|---|
conic-gradient() | 69.0 | 79.0 | 83.0 | 12.1 | 56.0 |
Sintaxis CSS
background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);
Value | Description |
---|---|
from angle | Optional. The entire conic gradient is rotated by this angle. Default value is 0deg |
at position | Optional. Specifies the gradient center of the conic gradient. Default value is center |
color degree, ..., color degree | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a degree between 0 and 360 or a percent between 0% and 100%). |
Más ejemplos
Ejemplo
Un degradado cónico con cinco colores:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
}
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)
}
Ejemplo
Haga que el degradado cónico parezca un pastel agregando border-radius: 50%:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
Ejemplo
Un gradiente cónico con un ángulo desde:
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
border-radius: 50%;
}
Ejemplo
Un gradiente cónico con una posición en:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
Ejemplo
Un gradiente cónico tanto desde el ángulo como desde la posición:
#grad {
background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
border-radius: 50%;
}
Ejemplo
Otro gráfico circular:
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow
90deg, yellow 180deg, green 180deg);
border-radius: 50%;
}
páginas relacionadas
Tutorial de CSS: Gradientes de CSS