Линейные градиенты — это плавный переход от одного цвета к другому. Градиенты описываются внутри CSS-свойстваbackground-image. Примеры использования:
background-image: linear-gradient(to left bottom, yellow, green);
background-image: linear-gradient(-90deg, red, yellow, green);
background-image: linear-gradient(red 50%, yellow 50%, green 100%); /* колорстопы, % либо px */
background-image: linear-gradient(red 50px, yellow 50px, rgba(0, 255, 0, 0.5) 100px);
background-image:
linear-gradient(...),
linear-gradient(...);
background-image: repeating-linear-gradient(red 0px, red 25px, yellow 25px, yellow 50px, green 50px, green 75px); /* повторяющийся резкий градиент */
Колорстопы задают то место, где будет располагаться центральная (самая насыщенная) часть цвета. Они задают точку, от которой начинается переход в другой цвет. Если задать одну и ту же позицию (например, 50px и 50px для разных цветов) — то получится резкий переход цветов, так как они оба будут «вытекать» из одной точки в противоположных направлениях.
Свойство repeating-linear-gradient можно использовать для создания повторяющихся градиентов (равносильно сочетанию свойств background-size и background-repeat).