Agregar degradados como fondos

Agregar degradados mediante CSS

Degradado lineal y degradado radial o elíptico.

Degradado lineal

La expresión inglesa para indicar linealidad es linear.

    .deg-lineal-1 {
        /* Degradado vertical */
        background-image: linear-gradient( red, black ) ;
    }
    .deg-lineal-2 {
        /* Degradado según un ángulo decimal */
        background-image: linear-gradient( 45deg, red, black ) ;
    }
    .deg-lineal-3 {
        /* Degradado con transparencia */
        background-image: linear-gradient( 45deg, black, rgba( 0,0,0, .4 ) ) ;
    }
    .deg-lineal-4 {
        /* Degradado con varios puntos de colores */
        background-image: linear-gradient( 45deg, red, blue, black ) ;
    }

Degradado elíptico o circular

La expresión inglesa para indicar radialidad es radial.

    .deg-eliptico-1 {
        /* Degradado elíptico, se adapta a la proporción del DIV */
        background-image: radial-gradient( red, blue ) ;
     }