Линейный градиент linear-gradient()
Линейный градиент создается с помощью двух и более цветов, для которых задано направление, или линия градиента. Если направление не указано, используется значение по умолчанию — сверху-вниз. Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.
Направление градиента может быть задано двумя способами:
с помощью угла наклона в градусах deg, значение которого определяет угол наклона линии внутри элемента;
с помощью ключевых слов to top, to right, to bottom, to left, которые соответствуют углу градиента, равному 0deg, 90deg, 180deg и 270deg соответственно.
Пример 1: Начинается от одного цвета, заканчивается другим.
Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!
Код HTML:
HTML:
<div class="lg-1"></div>
CSS:
.lg-1 {
width: 600px;
height: 200px;
background-image: linear-gradient(135deg, #facd0f, #ff74d4);
}
Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!
Код HTML:
HTML:
<div class="lg-2"></div>
CSS:
.lg-2 {
width: 600px;
height: 200px;
background: linear-gradient(30deg, #ffc400, #63f417, #ffc400);
}
Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!
Код HTML:
HTML:
<div class="lg-3"></div>
CSS:
.lg-3 {
width: 600px;
height: 200px;
background-image: linear-gradient(#fff 33%, #004eff 33%, #004eff 66%, #ff0000 66%);
}