CSS linear-gradient()

[Serg_Brain]

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

Линейный градиент создается с помощью двух и более цветов, для которых задано направление, или линия градиента. Если направление не указано, используется значение по умолчанию — сверху-вниз. Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.

Направление градиента может быть задано двумя способами:

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

Пример 1: Начинается от одного цвета, заканчивается другим.

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

Код HTML:

<div class="lg-1"></div>

Код CSS:

.lg-1 {
    width: 600px;
    height: 200px;
    background-image: linear-gradient(135deg, #facd0f, #ff74d4);
}

Пример 2: Начинается от одного цвета, сменяется вторым и возвращается к начальному цвету.

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

Код HTML:

<div class="lg-2"></div>

Код CSS:

.lg-2 {
    width: 600px;
    height: 200px;
    background: linear-gradient(30deg, #ffc400, #63f417, #ffc400);
}

Пример 3: Начинается от одного цвета, сменяется вторым и меняется третьим, смена цветов происходит резко и получается такой эффект.

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

Код 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%);
}