Gradient

Linear gradient

Linear gradient can be specified through the background: linear-gradient() property.

.gradient {
    background: linear-gradient(red, green, blue);

    /* IE 9 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F4F4F4', endColorstr='#EBEBEB'); 
}

You can also specify the size of the gradient:

.gradient {
    background: linear-gradient(red 10%, green 80%, blue);
}
Linear gradient
Linear gradient with specified length

Radial gradient

The radial gradient can be specified through the background: radial-gradient() property.

.radial-gradient {
    background: radial-gradient(red, green);
}

Examples of radial gradient:

Radial gradient
Radial gradient with specified length

You can also specify the size of the radial gradient and indents in the first parameter of the background: radial-gradient() property.

.radial-gradient {
    background: radial-gradient(200px at 100% 10px, red, green, blue);
}
Radial gradient with specified size and size

Horizontal gradient

To make the direction of the gradient from left to right, you must first specify to right parameter.

.gorizontal-gradient {
    background: linear-gradient(to right, red, blue);
}
Horizontal gradient