Функция linear-gradient в CSS. Полное руководство с примерами

CSS предоставляет множество возможностей для стилизации веб-страниц, и одной из таких возможностей является создание градиентных фонов с помощью функции linear-gradient(). Эта функция позволяет создавать плавные переходы между двумя и более цветами, что придаёт дизайну глубину и визуальный интерес. В этой статье мы рассмотрим, как работает linear-gradient(), и приведём примеры использования этой функции в различных сценариях.

Основы linear-gradient()

Функция linear-gradient() создаёт линейный градиент, который можно использовать в качестве значения свойства background-image. Основной синтаксис функции выглядит следующим образом:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

• direction — направление градиента.
• color-stop — точки остановки цвета, которые определяют, где и как цвета должны переходить друг в друга.

Пример простого линейного градиента

background-image: linear-gradient(to right, red, blue);

В этом примере создаётся градиент, который плавно переходит от красного (red) к синему (blue) слева направо.

Указание направления градиента

Использование ключевых слов

Направление градиента можно задавать с помощью ключевых слов to top, to bottom, to left, to right, а также их комбинаций (to top right, to bottom left и т.д.).

background-image: linear-gradient(to bottom right, red, yellow);

Указание угла

Кроме ключевых слов, можно использовать углы для более точного указания направления градиента. Углы указываются в градусах (deg), где 0deg соответствует движению снизу вверх, 90deg — слева направо, и так далее.

background-image: linear-gradient(45deg, red, blue);

Точки остановки цвета

Основные точки остановки

Цвета в градиенте могут располагаться в определённых точках, что позволяет создавать более сложные переходы. По умолчанию цвета равномерно распределяются от начала до конца градиента.

background-image: linear-gradient(to right, red, yellow 50%, green);

В этом примере жёлтый цвет занимает середину градиента, создавая переход от красного к зелёному через жёлтый.

Использование нескольких цветов

Можно использовать больше двух цветов для создания многоцветного градиента.

background-image: linear-gradient(to right, red, yellow, green, blue);

Повторяющиеся градиенты

CSS также поддерживает повторяющиеся градиенты с помощью функции repeating-linear-gradient(). Эта функция создаёт линейный градиент, который повторяется по заданному шаблону.

Пример повторяющегося градиента

background-image: repeating-linear-gradient(to right, red, yellow 10%, green 20%);

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

Примеры использования

Создание градиента для фона кнопки

button {
    background-image: linear-gradient(to bottom, #3e8e41, #2d6b2a);
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

Градиентный фон для блока

div.gradient-box {
    background-image: linear-gradient(to left, #ff7e5f, #feb47b);
    padding: 20px;
    border-radius: 5px;
    color: white;
}

Повторяющийся градиент для фона страницы

body {
    background-image: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
}

Заключение

Функция linear-gradient() в CSS является мощным инструментом для создания визуально привлекательных фоновых изображений. С её помощью можно легко создавать плавные переходы между цветами, задавать направление градиента и создавать повторяющиеся паттерны. Освоив эту функцию, вы сможете значительно улучшить внешний вид своих веб-страниц и добавить им стильных элементов.