Gradientes cónicos

La función conic-gradient() de CSS

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%
Tabla de contenidos