CSS градиенты

#1 Линейный градиент linear-gradient()

Градиенты создаются с помощью функций linear-gradient() и radial-gradient(). Градиентный фон можно устанавливать в свойствах background, background-image, border-image и list-style-image.

background: linear-gradient(угол / сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.);

#2 Направление градиента

с помощью угла наклона в градусах deg, значение которого определяет угол наклона линии внутри элемента.

background: linear-gradient(45deg, #EECFBA, #C5DDE8);

с помощью ключевых слов to top, to right, to bottom, to left, которые соответствуют углу градиента, равному 0deg, 90deg, 180deg и 270deg соответственно.

background: linear-gradient(to right, #F6EFD2, #CEAD78);

Для неравномерного распределения цветов указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops. Точки остановки задаются в %, где 0% — начальная точка, 100% — конечная точка

background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%);

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

background: linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%);

#3 Радиальный градиент radial-gradient()

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

background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.);

Форма градиента

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

background: radial-gradient(white, red);

Позиция центра

задаётся с помощью ключевых слов, используемых в свойстве background-position, с добавлением приставки at. Если позиция центра не задана, используется значение по умолчанию at center.

background: radial-gradient(at top, #fff, red);

Размеры градиента

С помощью пары значений, указанных в единицах длины %, em или px, можно управлять размером эллипсообразного градиента. Первое значение задает ширину эллипса, второе — высоту.

background: radial-gradient(40% 50%, #fff, red);

#4 Комбинация градиента и фонового изображения

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

background: linear-gradient(45deg, rgba(103, 0, 31, .8), rgba(34, 101, 163, .5)), url(https://html5book.ru/wp-content/uploads/2016/12/photo-8.jpg);

background-size: cover;