Gradientes cónicos

Existe un tercer tipo de gradiente en CSS, visualmente muy similar al gradiente radial, pero haciendo referencia a una figura cónica vista desde un plano superior, incluyendo sus sombras y brillos.

conic-gradient()

Se trata de la función conic-gradient(), que permite crear gradientes cónicos. Su sintaxis es la siguiente:

Función y modalidad	Significado
conic-gradient(, , ...)	Gradiente básico entre colores.
conic-gradient(from , , , ...)	Gradiente indicando posición de color.
conic-gradient(from at ubicación, , , ...)	Gradiente indicando ubicación del inicio.
conic-gradient(from at ubicación, , , ...)	Gradiente con posición de inicio y fin.

Punto de inicio del gradiente

Mediante la palabra clave from podemos indicar los grados desde los cuales comenzamos el gradiente cónico, que por defecto, se establece en 0deg.

Parámetros	Valor
from	Ángulo desde donde comienza el gradiente cónico. Por defecto from 0deg.

Recuerda que es posible indicar varios tipos de unidades, entre las que se encuentran grad, rad o turn, a parte de deg:

Dirección	Grados	Gradianes	Radianes	Giro
Arriba	from 0 ó from 360deg	from 0 ó from 400grad	from 0 ó from rad	from 0 ó from 1turn
Arriba-derecha	from 45deg	from 50grad	from 0.78rad (π/4)	from 0.125turn
Derecha	from 90deg	from 100grad	from 1.57rad (π/2)	from 0.250turn
Abajo-derecha	from 145deg	from 150grad	from 2.35rad	from 0.375turn
Abajo	from 180deg	from 200grad	from 3.14rad (π)	from 0.5turn
Abajo-izquierda	from 215deg	from 250grad	from 3.92rad	from 0.625turn
Izquierda	from 270deg	from 300grad	from 4.71rad (2π)	from 0.75turn
Arriba-izquierda	from 325deg	from 350grad	from 5.49rad	from 0,875turn

Posición del centro

Es posible indicar una ubicación específica para colocar el centro del gradiente en el elemento en cuestión en el que nos encontremos. Para ello, solo tenemos que indicar la palabra clave at, seguido del lugar donde queremos colocarlo:

Parámetros	Valor
	Indica la ubicación en x e y de la forma del gradiente, por ejemplo, con porcentajes.
[ubicación]	center | top | left | right | bottom | top left | top right | bottom left | bottom right

Un pequeño ejemplo para ilustrar como dar posición a un gradiente cónico:

.element {
  width: 600px;
  height: 400px;

  /* Gradiente cónico que comienza arriba, centrado en horizontal */
  background-image: conic-gradient(at 50% 0%, blue, black);
}

Por su parte, indicar los colores del gradiente se hace exactamente de la misma forma que en los gradientes lineales, salvo que en este caso se trata de un gradiente cónico.

repeating-conic-gradient()

Por último, todos los gradientes que hemos visto hasta ahora, permiten la posibilidad de añadir el prefijo repeating- para conseguir que el efecto del gradiente, en lugar de adaptarse a la región completa, realice una repetición constantemente. El caso de los gradientes cónicos no es una excepción:

div {
  background: repeating-conic-gradient(blue 10%, yellow 20%, red 30%);
}

Es importante que al usar el prefijo repeating- se especifiquen tamaños a los colores, puesto que se necesita saber cuando comenzará a repetirse. En los ejemplos anteriores, los colores seguirían el patrón hasta el último color y volverían a repetirse sucesivamente, de forma que tendríamos:

• Primera repetición: blue 10%, yellow 20%, red 30%
• Segunda repetición: blue 40%, yellow 50%, red 60%
• Tercera repetición: blue 70%, yellow 80%, red 90%
• Cuarta repetición: blue 100%