27 стильных примеров фонового градиента CSS

29 июня, 2021 Дядя Влад

Для дизайнера или разработчика очень важно оставаться в курсе основных тенденций и стандартов веб-дизайна. В настоящее время фоновые градиенты широко используются на современных веб-сайтах.

В этой статье мы рассмотрим различные примеры фоновых градиентов с использованием CSS.

Фоновые градиенты с использованием CSS

Градиент CSS отображает плавный переход с использованием двух или более указанных цветов. CSS-градиент обеспечивает лучший контроль и производительность по сравнению с использованием фактического файла изображения (градиента). Свойство CSS background-image используется для объявления градиентов в качестве фона.

Существует три типа градиентов: линейный (созданный с помощью функции linear-gradient () ), радиальный (созданный с помощью функции radial-gradient () ) и конический (созданный с помощью функции conic-gradient () ). Кроме того, вы можете создавать повторяющиеся градиенты с помощью функций repeat-linear-gradient () , repeat-radial-gradient () и repeat-conic-gradient () .

MDN Docs определяет эти функции как:

linear-gradient () : функция CSS linear-gradient () создает изображение, состоящее из постепенного перехода между двумя или более цветами вдоль прямой линии. Его результатом является объект типа данных <gradient> , который представляет собой особый вид <image> .

radial-gradient () : CSS-функция radial-gradient () создает изображение, состоящее из постепенного перехода между двумя или более цветами, исходящими из исходной точки. Его форма может быть кругом или эллипсом. Результатом функции является объект типа данных <gradient> , который представляет собой особый вид <image> .

conic-gradient () : CSS-функция conic-gradient () создает изображение, состоящее из градиента с переходами цвета, повернутыми вокруг центральной точки (а не исходящими из центра). Примеры конических градиентов включают круговые диаграммы и цветовые круги. Результатом функции conic-gradient () является объект с типом данных <gradient> , который представляет собой особый вид <image> .

Repeating-linear-gradient () : функция CSS repeat-linear-gradient () создает изображение, состоящее из повторяющихся линейных градиентов. Он похож на gradient / linear-gradient () и принимает те же аргументы, но повторяет остановку цвета бесконечно во всех направлениях, чтобы покрыть весь контейнер. Результатом функции является объект типа данных <gradient> , который представляет собой особый вид <image> .

Repeating-radial-gradient () : функция CSS Repeating-radial-gradient () создает изображение, состоящее из повторяющихся градиентов, исходящих из исходной точки. Он похож на gradient / radial-gradient () и принимает те же аргументы, но он повторяет остановку цвета бесконечно во всех направлениях, чтобы покрыть весь его контейнер, аналогично gradient / repeat-linear-gradient (). Результатом функции является объект типа данных <gradient> , который представляет собой особый вид <image> .

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

Вот официальный синтаксис каждого типа градиента.

Официальный синтаксис линейных градиентов

 linear-gradient(
 [ <angle> | to <side-or-corner> ]? ,
 <color-stop-list>
 )
 <side-or-corner> = [to left | to right] || [to top | to bottom]

Официальный синтаксис радиальных градиентов

 radial-gradient(
 [ <ending-shape> || <size> ]? [ at <position> ]? ,
 <color-stop-list>
 );

Официальный синтаксис конических градиентов

 conic-gradient(
 [ from <angle> ]? [ at <position> ]?,
 <angular-color-stop-list>
 )

Вот несколько потрясающих примеров фонового градиента, которые могут улучшить пользовательский интерфейс вашего сайта на новый уровень.