Градиентный фон для сайта: Как сделать градиентный фон на веб-странице?

Интернет-агентство BINN » Тенденция дизайна в 2021 году: градиенты. Часть 2

Тенденция использования градиентов в дизайне не устаревает уже много лет, она по прежнему актуальна и в 2021 году. Есть множество способов интересно использовать этот элемент дизайна. 

Во второй части нашей статьи мы продолжим делиться с вами различными вариантами, как максимально эффектно можно использовать градиенты в ваших дизайн-проектах

Градиентный фон

Градиент на фоне — это, вероятно, самое популярное применение этой тенденции дизайна. Фоновый градиент хорошо работает с яркими цветами, приглушенными палитрами или с любой другой цветовой  комбинацией. Градиенты на фоне могут состоять из двух или более оттенков.

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

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

Однотонные градиенты

Классический однотонный градиент — это также самый популярный вид градиента. Он поможет выделить цветовую палитру бренда, может стать основой для изображения, как в примере выше, или использоваться в качестве фонового элемента.

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

Нежные и легкие градиенты

Нежные градиенты — это отличный инструмент, если вам нужно создать глубину резкости на странице вашего сайта. При правильном выборе цвета, а также угла наклона, градиент может придать трехмерный эффект практически любому элементу на странице.   

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

Каждая строка шрифта бледнеет снизу вверх — от темного к светлому. Это помогает зафиксировать внимание пользователя, чтобы он более подробно ознакомился с текстом на сайте.

Градиенты в призывах к действию

Используйте градиент с минималистичным дизайном и небольшим количеством используемого цвета, чтобы привлечь пользователей к главной кнопке или призыву к действию на вашем сайте.

Интересный цветовой переход, как на примере выше, точно привлечет внимание ваших пользователей и заставит их нажать на призыв к действию, чтобы узнать, что будет дальше.

Градиенты и иллюстрации

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

Изображение выше — это отличный пример использования градиента в иллюстрациях. Если бы фон изображения был просто розовым или фиолетовым, картинка была бы более плоской и скучной.   

---

^{Источник:  designshack.net}

 

Фон в дизайне сайтов и приложений

Фон—неотъемлемая часть сайта или приложения. Если он однотонный и не яркий, пользователи не придают ему значения и даже не замечают. Тем не менее продуманный фон улучшит общее впечатление о продукте, например, правильно подобранный контрастный цвет привлечет внимание, а изображение дополнит впечатления от текста.

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

Каким может быть фон:

• Однотонный фон

Яркий однотонный фон—хороший способ привлечь внимание к блоку, если правильно его подобрать, он обеспечит хороший контраст с текстом, привлекая к нему больше внимания.

Однотонный фон может быть неяркий, еле заметного оттенка, чтобы визуально разделить блоки.

Убедитесь, что цвета подходят к отрасли или используйте цвет фирменного стиля, если он есть. То же самое можно отнести и к градиентам.

Одноцветный контрастный фон разделяет блоки на сайте lalalab.ru

• Градиент

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

Притягивающий взгляд градиентный фон на сайте mobirise.com

• Фото

Красивые фотографии отлично подойдут, чтобы передать атмосферу и идею, усилить впечатление от текста.

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

Фото в качестве фона на сайте discoverireland.ie передает атмосферу путешествий

• Элементы фирменного стиля
Использование элементов фирстиля позволит подчеркнуть единство стиля, произведет впечатление аккуратного и точно выверенного продукта, где каждая деталь на своем месте. 

Фон с элементом фирменного стиля на сайте medatrium.ru

Тематический паттерн на сайте туристической компании russiadiscovery.ru

• Текстура

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

Текстура рваной бумаги на сайте davidboylecpg.com выделяет блок с CTA

• Анимация

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

Анимация на сайте kikk.be/2020

Выводы:

• Яркий однотонный фон или градиент привлекает внимание к блоку, неяркий, еле заметный однотонный оттенок можно использовать, чтобы визуально разделить блоки.

• Красивые фотографии отлично подойдут, чтобы передать атмосферу и идею, усилить впечатление от текста.

• Элемент фирменного стиля на фоне позволит подчеркнуть единство стиля.

• Фон с паттерном или текстурой акцентирует внимание на специфике продукта.

• Анимация привлечет внимание к определенному блоку.

20 веб-сайтов, которые доказывают, что градиенты возвращаются

Поделиться

• Доля
• Твитнуть
• Поделиться
• Приколи

Вдохновение • Примеры веб-сайтов

Паула Боровска • 15 июля 2015 г. • 6 минут ПРОЧИТАТЬ

Эпоха плоского дизайна подходит к концу, возможно, не целиком, а постепенно. Самым ярким свидетельством этого является новая, растущая тенденция градиентов. Они намного тоньше, чем градиенты, которые мы привыкли видеть в эпоху веб 2.0 или позже.

Давайте будем честными, градиенты снова в моде!

Я составил список из 20 новых дизайнов веб-сайтов, в которых в той или иной форме используются градиенты. Некоторые из них довольно тонкие, другие чрезвычайно яркие; в любом случае, градиенты — это новый интересный способ оживить ваш дизайн.

Группа VO2

Мелани Ф – Look Book

Adoratorio

Карды

Саймодд

ООО

Фо

Невозможное бюро

Индивидуальный

Веб-поток

Продукт для получения прибыли

Настольный герой

ГоГоРо

Сегмент

Мапбокс

Питни Боуз

Полоса

Один Джон Сент

Будить

Заключение

VO2 Group

Новый веб-сайт VO2 отличается нетипичным дизайном, он состоит из множества различных элементов, расположенных друг над другом. Вот такие веб-сайты делаются! Это интересно и разнообразно. Один из элементов фона — треугольники — демонстрирует небольшой градиент; это определенно придает простому треугольному элементу больше визуального интереса.

Melanie F – Look Book

Лукбук Мелани начинается с макета, который становится все более и более популярным среди модных сайтов, где текст не выровнен поверх изображений. В этом случае вводный текст находится поверх квадрата, который используется в качестве шапки сайта. Прямоугольная форма заполнена градиентом от зеленого до фиолетового, и это определенно помогает привлечь ваше внимание.

Adoratorio

Это дизайнерское агентство использует градиенты по-другому, раскрашивая текст раздела градиентом. Это довольно уникально и выглядит довольно круто. Это определенно творческий способ стилизации вашего текста, и он работает для них.

Qards

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

Symodd

Герой или вводная часть Symodd имеет полный градиент фона от оранжевого до розового. Это более тонкий градиент, так как два оттенка не слишком отличаются друг от друга, что делает его легким для глаз.

Inc

Inc также использует градиент в разделе героев. Однако они используют его немного по-другому, накладывая градиент от синего к фиолетовому на фотографию. Градиент здесь тоже не слишком резкий, так как синий и фиолетовый — очень похожие оттенки, поэтому он хорошо работает, когда он расположен поверх фотографии.

Pho

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

Impossible Bureau

Impossible Bureau использует очень яркий и контрастный градиент на своей странице! Круто то, что когда страница загружается, другие элементы переходят этот градиент, и только его части кажутся менее резкими и драматичными.

Customeed

Customeed использует зеленый градиент, который встречается значительно реже. Почему-то чрезвычайно популярны синие, фиолетовые или розовые градиенты. Тем не менее, в зеленом градиенте нет ничего плохого, он выглядит визуально приятно и отлично подходит для веб-сайта Customeed.

Webflow

Webflow не делает больших заявлений со своими градиентами — по крайней мере, по сравнению с другими сайтами в этом списке. Они используют небольшой всплеск градиента от розового до фиолетового и синего на своей домашней странице. Приятно иметь небольшие всплески этой захватывающей комбинации градиентов здесь и там.

Прибыль от продукта

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

Table Hero

Table Hero использует маленькие кусочки друга на своей домашней странице, и под маленькими кусочками я имею в виду крошечные всплески здесь и там. Через кнопку с рамкой в ​​1 пиксель или сквозь заголовки с очень тонким шрифтом виден небольшой градиент. Это интересный способ интегрировать градиент, который добавляет глубины и разнообразия дизайну, не выходя за рамки градиента.

GoGoRo

Герой, сокращенно от GoGoRo, минимален, но определенно привлекает внимание. Там ничего нет, кроме громкого слова «поехали», фото скутера и небольшого текста. Слово само по себе тонкое, но из-за большого размера шрифта буквы имеют некоторую толщину. Дизайнеры этого сайта воспользовались забавным градиентом от синего к зеленому и использовали его в качестве цвета шрифта.

Сегмент

Сегмент имеет более темный дизайн, где часто используется темно-серый фон для полных разделов. Однако, чтобы оживить обстановку или даже осветить ее, они используют много светлого неоново-зеленого цвета, чтобы украсить свой дизайн. Зеленый градиент на некоторых участках привлекает внимание и добавляет изюминку дизайну.

Mapbox

Mapbox имеет отличный раздел героев, когда вы входите на их домашнюю страницу. Некоторые из их слайдов используют тонкий градиентный фон, чтобы придать дизайну глубину и четкость.

Pitney Bowes

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

Stripe

Stripe недавно обновили свой сайт, и они используют градиенты! Некоторые из их различных слайдов включают в себя довольно красивые градиенты, такие как первый, который вы видите на скриншоте. Градиент от темного темно-синего к зеленому богат оттенками и отлично работает в качестве темного фона.

One John St

Это целевая страница жилого комплекса в ДАМБО, Бруклин. Удивительная особенность этого веб-сайта заключается в том, что градиент меняет цвета, углубляясь в зависимости от времени суток. Это интересная и забавная функция, включенная в дизайн этого сайта.

Wake

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

Заключение

Как видите, градиенты могут быть интересным дизайнерским решением. они помогают сделать эти забавные и захватывающие дизайны реальностью. В целом, градиенты неплохие — они никогда не были такими — просто мы устали от них за то, что они такие экстремальные. Хотя некоторые из этих примеров имеют большие контрасты, другие демонстрируют более мягкую сторону вещей. Я надеюсь, что этот список вдохновил вас на ваши следующие дизайнерские начинания.

Редактор Wix: добавление цвета и градиентного фона к вашим элементам | Справочный центр

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

Из этой статьи вы узнаете больше о:

Добавление сплошного цвета к фону

Применение одного цвета к фону. Выберите цвета темы вашего сайта, сохраненные цвета или добавьте новый.

Чтобы изменить цвет фона:

1. Щелкните соответствующий элемент в Редакторе.
2. Нажмите Изменить фон .
3. Нажмите Цвет .
4. Щелкните значок «Цвет» в верхней части палитры цветов и выберите один из следующих вариантов:
   • Цвет темы: Это цвета, используемые в теме вашего сайта, которые можно автоматически применять к элементам на вашем сайте. Выберите цвет в разделе Theme Colors , чтобы применить его к фону. Вы также можете изменить цвета темы, нажав Изменить в правом верхнем углу панели. Узнать больше
   • Мои цвета: Это цвета, которые вы ранее добавили и сохранили на своем сайте. Щелкните цвет в разделе Мои цвета , чтобы применить его к фону.
   • Выберите новый цвет: Нажмите +Добавить , чтобы выбрать новый цвет. После этого новый цвет будет доступен в разделе «Мои цвета» для применения к элементам на вашем сайте.

Добавление градиента к фону

Градиенты — это увлекательный и увлекательный способ настройки элементов и сайта. Выберите эффект и отрегулируйте цвета и непрозрачность, чтобы привлечь внимание посетителей. Существует 3 типа фоновых градиентов:

• Линейный: Цвета в градиенте находятся на противоположных концах и сливаются вдоль невидимой линии.
• Радиальный: Цвета окружают друг друга и сливаются по радиусу.
• Коническая: Цвета в градиенте имеют повернутый переход вокруг центральной точки.

Чтобы добавить и настроить градиент:

1. Щелкните соответствующий элемент в Редакторе.
2. Нажмите Изменить фон .
3. Нажмите Цвет .
4. Щелкните значок «Градиент» в верхней части палитры цветов.
5. Нажмите раскрывающееся меню и выберите тип градиента, который вы хотите применить.
6. Настройте свой градиент, используя параметры:
   • Линейный:
     • Угол: Выберите угол градиента.
     • Цветовые позиции и расстояние: Измените порядок цветов или сдвиньте их ближе или дальше друг от друга.
     • Настройка цветов и прозрачности: Изменение цвета и увеличение или уменьшение прозрачности.
     • Добавить новый цвет: Щелкните в любом месте на полосе, где еще нет цветной точки, чтобы добавить и настроить новый цвет.
   • Радиальный:
     • Центральная точка: Установите центральную точку градиента.
     • Цветовые позиции и расстояние: Измените порядок цветов или сдвиньте их ближе или дальше друг от друга.
     • Настройка цветов и прозрачности: Изменение цвета и увеличение или уменьшение прозрачности.
     • Добавить новый цвет: Щелкните в любом месте на полосе, где еще нет цветной точки, чтобы добавить и настроить новый цвет.
   • Коническая:
     • Положение и вращение: Щелкните и перетащите внутренний круг центральной точки, чтобы изменить ее положение на фоне, и щелкните и перетащите внешний круг, чтобы изменить вращение перехода цвета.
     • Цветовые позиции и расстояние: Измените порядок цветов или сдвиньте их ближе или дальше друг от друга.
     • Настройка цветов и прозрачности: Изменение цвета и увеличение или уменьшение прозрачности.
     • Добавить новый цвет: Щелкните в любом месте на полосе, где еще нет цветной точки, чтобы добавить и настроить новый цвет.

Добавление плавного градиента к фону

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

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

Чтобы добавить и отредактировать градиент жидкости:

1. Щелкните соответствующий элемент в Редакторе.
2. Нажмите Изменить фон .
3. Нажмите Цвет .
4. Щелкните значок «Жидкий градиент» в верхней части палитры цветов.
5. Настройте свой градиент, используя параметры:
   • Позиция: Измените положение каждого цвета в градиенте.
   • Настройка цветов и прозрачности: Измените цвет и используйте ползунок, чтобы увеличить или уменьшить прозрачность.
   • Размер: Установите размер цветов в градиенте.
   • Распространение: Установите, насколько каждый цвет распространяется по градиенту.
   • Цвет за градиентом: Выберите цвет для отображения за градиентом.
   • Добавить новый цвет: Щелкните в любом месте предварительного просмотра, где еще нет цветной точки, чтобы добавить и настроить новый цвет. Подсказка: Вы можете добавить столько цветов, сколько хотите, поэтому нет никаких ограничений на то, сколько вы можете настроить градиент.

Применение градиентов к фону видео или изображений

Если у вашего элемента есть фоновое изображение или видео, вы также можете добавить к нему эффект градиента.

Просто выберите видео или изображение в качестве фона, затем отрегулируйте непрозрачность градиента.