Как сделать градиент фона в 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);
}
