radial-gradient
Gradientes radiales, radial-gradient

<< Gradientes conic-gradient >>

Gradientes radiales, radial-gradient

Este tipo de gradiente es un gradiente circular. Hay que indicarle la forma que queremos (circle o ellipse, por defecto será ellipse) y los colores a utilizar. Los parámetros que puede tomar esta función son: radial-gradient([forma] [tamaño] [at ubicación], color [inicio] [fin], color [inicio] [fin], …).

El gradiente básico sería al que le indicamos sólo los colores, luego el gradiente circular o elíptico, dejando paso al gradiente con posición.

.element {
    /* Modalidad básica */
    background: radial-gradient(gold, red, black);
    /* Gradiente elíptico */
    background: radial-gradient(ellipse, gold 50%, red 55%, black 75%);
    /* Gradiente circular */
    background: radial-gradient(circle 200px, gold 50%, red 55%, black 75%);
    /* Gradiente circular con posición */
    background: radial-gradient(circle 400px at left, gold 50%, red 55%, black 75%);
}

Como podemos ver, el primer parámetro corresponde a la forma del gradiente radial que queremos, donde si es circular se le puede dar un tamaño y si es elíptica le podemos indicar su tamaño también (ancho y alto). El tamaño puede ser un valor fijo, o la palabras reservadas farthest-corner (hasta la esquina más lejana, valor por defecto), closest-corner (esquina más cercana), farthest-side (hasta el lado más lejano), closest-side (hasta el lado más cercano).

A cualquiera de las formas del gradiente le podemos indicar su posición específica, para ello haremos uso de la palabra reservada at seguido de center, top, left, right, bottom, top left, top right, bottom left, bottom right.

Indicar que como el linear-gradient, tenemos la posibilidad de repetir el gradiente circular, para ello haremos uso de la función repeating-radial-gradient.

<< Gradientes conic-gradient >>