Gradientes cónicos CSS
Gradientes 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, 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);
}
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);
}
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);
}
Crear gráficos circulares
Simplemente agregue border-radius: 50%para que el gradiente cónico se vea como 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%;
}
Gradiente cónico con ángulo desde especificado
El [ ángulo desde ] 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);
}
Gradiente cónico con posición central especificada
[en la 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);
}
Repetición de un gradiente cónico
La repeating-conic-gradient()función se utiliza 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%;
}
Funciones de gradiente CSS
La siguiente tabla enumera las funciones de degradado de CSS:
| Function | Description |
|---|---|
| conic-gradient() | Creates a conic gradient. Define at least two colors (around a center point) |
| linear-gradient() | Creates a linear gradient. Define at least two colors (top to bottom) |
| radial-gradient() | Creates a radial gradient. Define at least two colors (center to edges) |
| repeating-conic-gradient() | Repeats a conic gradient |
| repeating-linear-gradient() | Repeats a linear gradient |
| repeating-radial-gradient() | Repeats a radial gradient |