Как сделать градиент в css

Узнайте, как создать красивый градиент в CSS. Мы покажем вам пример и подробно объясним, как сделать плавный переход цветов и изменить наклон градиента.

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

Например:

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

Таким образом мы создаем горизонтальный линейный градиент из красного цвета в левую часть и синего цвета в правую. Функция linear-gradient() принимает два параметра: направление градиента и список цветов с указанием процентного соотношения. Для других видов градиентов, например, для радиального, можно использовать функцию radial-gradient(). Функция принимает два параметра: форму и цвета. Например:

.gradient2 {
    background-image: radial-gradient(circle, red, blue);
}

Также можно указать несколько цветов с различным процентным соотношением. Например:

.gradient3 {
    background-image: linear-gradient(to right, red 20%, blue 40%, yellow 60%, green 80%);
}

В этом примере мы указали четыре цвета и процентное соотношение для каждого из них – первый цвет (красный) начинается на 20%, второй (синий) на 40%, третий (желтый) на 60%, а четвертый (зеленый) на 80%.

Подводя итог

Таким образом, с помощью псевдоэлемента background-image и функций linear-gradient() и radial-gradient() можно создать красивый градиент в CSS.