linear-gradient -Линейный градиент

Запись функции:

background: linear-gradient(to top right, #000, #fff);

  В зависимости от сочетания и последовательности направлений получается градиент в разном направлении.

Но можно указать и угол радиента:

Также можно указать и процент заполнения цветом:

background: linear-gradient(to top, #b5bdc8 0%, #828c95 36%, #28343b 100%);

Для создания сложных градиентов, можно через запятую указывать много комбинаций:

background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

В этом примере используются многопозиционные цветовые остановки, причем смежные цвета имеют одинаковое значение цветового стопа, создавая полосатый эффект.

Пример 1.

.gradbloki {
  background: linear-gradient(to right, 
     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
}

Пример 2

.gradprimer2 {
  background: linear-gradient(45deg, red, blue);
}

Пример 3

.gradprimer3 {
  background: linear-gradient(135deg, orange, orange 60%, cyan);
}

===

Читать о повторе градиента - repeating-linear-gradient

Примеры линейных градиентов как фона - смотреть
Больше о градиентах - developer.mozilla.org

Онлайн генератор градиента - http://www.colorzilla.com/gradient-editor/