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.
La función 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 | Tipo de gradiente |
|---|---|
conic-gradient() |
Básico entre colores. |
conic-gradient(from ) |
Con posición de color. |
conic-gradient(from at ubicación, ) |
Con ubicación del inicio. |
conic-gradient(from at ubicación, ) |
Con posición de inicio y fin. |
Punto de inicio del gradiente
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 |
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);
}<div class="element"></div>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:
.element {
width: 500px;
height: 250px;
background: repeating-conic-gradient(blue 10%, yellow 20%, red 30%);
}<div class="element"></div>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%
¿Quién soy yo?
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