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.
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. |
Mediante la palabra clave from
podemos indicar los grados 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 |
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.
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:
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev