Градиент

Линейный градиент

Линейный градиент можно указать через свойство background: linear-gradient().

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

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

Также можно указывать размер градиента:

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

Радиальный градиент

Радиальный градиент можно указать через свойство background: radial-gradient().

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

Примеры радиального градиента:

Также можно указать размер радиального градиента и отступы в первом параметре свойства background: radial-gradient().

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

Горизонтальный градиент

Чтобы сделать направление градиента слева направо, надо в начале указать параметр to right.

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