Как сделать градиент фона в css

Градиентный фон можно устанавливать в свойствах background и background-image, но, для экономии места, все примеры будут записаны в обобщенном свойстве background. Значение которое принимает свойство background может быть одним из:

linear-gradient(), линейный градиент, создается с помощью двух и более цветов, для которых задано направление, или линия градиента.

Пример

body {
 /* необходимо задать высоту блока */
 height: 100vh;
 /* зальем body документа градиентом из 3 цветов, начало градиента - нижний левый угол*/
 background: linear-gradient(45deg, #4158D0 0%, #4158D0 30%, #C850C0 30%, #C850C0 60%, #FFCC70 60%, #FFCC70 100%);
}

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

body {
 /* необходимо задать высоту блока */
 height: 100vh;
 /* зальем body документа градиентом из 3 цветов, начало градиента - нижний левый угол*/
 background: linear-gradient(45deg, #4158D0 35%, #C850C0 35%, #C850C0 65%, #FFCC70 65%, #FFCC70 100%);
}

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

Пример

body {
 /* необходимо задать высоту блока */
 height: 100vh;
 /* зальем body документа градиентом из 2 цветов, начало градиента - центр страницы*/
 background: radial-gradient(#4158d0, #c850c0);
}

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

repeating-linear-gradient() или repeating-radial-gradient() - вышеуказанные варианты только с функцией повтора, чаще всего с помощью этих вариантов создают полосатые узоры.

Пример

body {
 /* необходимо задать высоту блока */
 height: 100vh;
 /* зальем body документа градиентом из 2 цветов, начало градиента - центр страницы*/
 background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
}