conic-gradient
Gradientes cónicos, conic-gradient

<< radial-gradient Transformaciones >>

Gradientes cónicos, conic-gradient

El gradiente cónico es similar al radial pero haciendo un cono visto desde arriba. Los parámetros que puede recibir la función conic-gradient([from angle at ubicación] ,color [tamaño] [ŧamaño], color [tamaño] [ŧamaño], ...).

Para indicar desde dónde queremos que comience el gradiente usaremos la palabra reservada from seguida de los grados (por defecto será 0deg). A continuación, se indicaría la posición donde queremos poner el centro del gradiente, para ello usaremos la palabra at seguida del lugar donde queremos ubicarlo posX posY, center, top, left, rigfht, bottom, top left, top right, bottom left, bottom right.

.element {
    width: 70vw;
    height: 30vh;
    /* cónico que empieza arriba centrado en horizontal */
    background: conic-gradient(from 45deg, blue, red);

Del mismo modo que el linear-gradient como el radial-gradient tenemos el repeating-conic-gradient.

.element {
    width: 70vw;
    height: 30vh;
    /* cónico que empieza arriba centrado en horizontal */
    background: repeating-conic-gradient(blue 10%, yellow 20%, red 30%);
}

<< radial-gradient Transformaciones >>