Градиенты для сайта: Красивые CSS и PNG градиенты для сайта, инстаграм и фотошопа — Gradients.app

Градиенты в веб-дизайне

В 2021 году в тренде остаются цветовые градиенты. С их помощью можно сконцентрировать внимание на самых важных зонах страницы и подвести посетителя к выполнению целевого действия. Например, вы можете поставить акцент на кнопке «заказать» или побудить клиента листать дальше, если разместить градиент по вертикали. 

 

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

 

 

Виды градиентов 

 

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

 

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

• Радиальные: в этом случае цвет меняет интенсивность от центра к краям фигуры. Оптимально подходит для округлых форм. 

 

Независимо от вида существуют определенные принципы использования:

• Цветовой градиент должен быть двухтонным, реже трехтонным.

• Графические элементы должны быть плоскими.

• По желанию можно включить внутренние или внешние тени, чтобы придать объемности. 

 

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

 

 

Модные градиенты 2021

 

Модные градиенты в 2021 году часто используются с целью создания 3D эффекта. На самом деле это иллюзия, но правильная работа с фонами и тенями позволяет выделить объект на фоне плоскости. Особенно эффектно это смотрится в совокупности с анимацией. Этот прием позволяет создать запоминающийся образ и привлечь внимание к важным элементам страницы. 

 

До 2017 года в тренде были градиенты с эффектом выцветания. Сейчас в моде плавные переходы от насыщенных до нежных тонов. Нередко используют неоновые оттенки и контрасты. В целом все зависит от рода деятельности компании и предоставляемых услуг. У посетителей не должен возникать диссонанс при сопоставлении дизайна и содержания страницы. Посмотрите, как реализован дизайн сайта мероприятия в шаблоне от Ucraft – он достаточно серьезный, но при этом градиент добавляет ему динамичности. Пользователь чувствует, что этот ивент уж точно не будет скучным.

 

 

 

 

Рекомендации по использованию градиентов

 

Чтобы использование градиентов принесло ожидаемые результаты, надо соблюдать ряд рекомендаций:

 

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

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

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

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

 

 

Правила использования градиентов в разных частях сайта

 

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

 

 

Шапка и первый блок

 

Градиенты регулярно используются для того, чтобы выделить главный экран. Часто цветовой градиент играет роль фонового изображения. Этот эффект позволяет добиться выполнения целевого действия. Пользователь, сам того не замечая, переводит взгляд в сторону кнопки «купить». 

 

 

 

 

Баннеры и слайдеры 

 

Градиент поможет ненавязчиво притянуть взгляд клиентов к баннерам.

Отличный пример – веб-сайт компании Apple.

 

 

 

 

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

 

 

Детали

 

Применение градиентов широко распространено в элементах декора на веб-странице. Посмотрим, например, как этот прием реализовывает Яндекс.Музыка. Комфортное для глаза сочетание цветов «заставляет» пользователя сделать выбор. Такой эффект также можно применить на странице оформления подписок, когда предлагается несколько тарифных планов.

 

 

 

 

Динамические эффекты

 

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

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

 

 

 

 

Типографика

 

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

 

 

 

 

Кнопки

 

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

 

 

 

 

Использование градиентов привлекает внимание гостей, а значит есть вероятность повысить продажи. Чтобы все сработало, должным образом важно:

 

• Учитывать источник света, если планируете переход от светлого к темному, или наоборот. 

• Не использовать противоречивые оттенки. Все должно гармонично сочетаться.

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

 

 

Почему стоит использовать градиенты в 2021 году

 

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

 

 

1. Задать стиль страницы

 

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

 

 

 

 

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

 

 

2. Привлечение внимания к объектам на странице

 

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

 

 

 

 

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

 

 

3.

Повышение конверсии

 

Если верить данным исследования, которые проводил Якоб Нильсен, то посетители веб-страницы просматривают ее по диагонали. Получается, что применение градиента позволяет направить взгляд потенциального клиента в нужное направление, то есть к кнопке «заказать».

 

 

 

 

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

 

 

4. Улучшение картинок

 

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

 

 

 

 

Цветные эффекты способны добавить насыщенности дизайну и глубины фотографиям. Важно учесть качество изображения. Низкое разрешение точно не впечатлит посетителей. И этого не исправит даже использование градиента. 

 

 

5. Расширение цветовой палитры

 

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

 

 

 

 

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

 

 

6. Выделение надписей на фоне градиентного перехода

 

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

 

 

 

 

7. Элементы, которые не забудут

 

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

 

 

 

 

Управляя вниманием посетителя, вы увеличите конверсию. Выделяйте наиболее выгодный вам тариф в формате «Хит продаж» или «Стандарт». 

 

 

8. Иллюзия глубины и реалистичности

 

Правильная игра с цветными переходами, игра с тенью и светом позволяет достичь эффекта объемности. Это как будто оживит фотографию. Даже качественное изображение не способно полностью воссоздать картину, а вот игра с тенями поможет добавить объема и переместить пользователя в центр событий. Чем дольше потенциальный клиент будет рассматривать вашу страницу, тем выше шансы, что он выполнит целевое действие. Кроме того, это «понравится» и поисковым системам.

 

 

 

 

Задайте атмосферу

 

 

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

 

К праздникам можно добавить на сайт соответственные элементы. Дизайнер должен разбираться не только в трендах, но и в психологии, чтобы понимать, чем руководствуются посетители сайта при целевом действии. В идеале обратиться к маркетологу, которые проанализирует вашу целевую аудиторию. Затем стоит нанять дизайнера, который на основании этих данных создаст нужный дизайн. Также понадобиться помощь копирайтера, так как текст играет не менее важную роль, чем дизайн, правильно подобранные слова подтолкнут посетителя на действие. Если вы пока не готовы с головой окунуться в серьезную работу с сайтом, вы всегда можете попробовать создать свой вариант на основе шаблонов сайтов Ucraft.

 

 

 

 

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

 

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

 

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

Редактор Wix: добавление цвета и градиентного фона к элементам сайта | Центр Поддержки

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

Содержание:

Использование сплошных цветов для фона

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

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

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

Использование градиента для фона

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

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

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

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

Использование плавного градиента для фона

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

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

Чтобы добавить и отредактировать плавный градиент:

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

Использование градиентов для фоновых фото и видео

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

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

Чтобы применить градиенты к фоновому фото или видео:

1. Нажмите на нужный элемент в редакторе.
2. Нажмите Изменить фон.
3. Нажмите Настройка.
4. Нажмите на поле выбора цвета рядом с пунктом Цвет под видео / Цвет под фото.
5. Создайте и добавьте градиент.
6. Нажмите X в верхней части палитры цветов / градиентов, чтобы закрыть панель.
7. Перетащите ползунок Прозрачность / Прозрачность видео, и сделайте градиент фона видимым по своему усмотрению.

Gradient Дизайны веб-сайтов, темы, шаблоны и загружаемые графические элементы на Dribbble

1. View Story Venture — Концепция веб-сайта

   Story Venture — Концепция веб-сайта

2. Посмотреть Софию — исследование заголовка героя

   София – исследование заголовка героя

3. Посмотреть HolaHolo — целевую страницу генератора голографических изображений

   HolaHolo — целевая страница генератора голографических изображений

4. Посмотреть [LIVE🔥] Веб-сайт AtoneNet

   [LIVE🔥] Сайт AtoneNet

5. Просмотр кошелька — Hero Header v. 5

   Бумажник – Hero Header v.5

6. Посмотреть новый сайт Plainthing Studio 🔥🔥

   Plainthing Studio Новый сайт 🔥🔥

7. Просмотр Kohaku — страница продукта

   Kohaku — Страница продукта

8. Пользовательский интерфейс просмотра рефералов — исследования

   Справочный интерфейс — исследования

9. Просмотр Mentalmu — веб-сайты о психическом здоровье 🧠

   Mentalmu — Сайты о психическом здоровье 🧠

10. Просмотр кошелька — Hero Header v6

    Бумажник — Hero Header v6

11. Посмотреть Design Joe — Целевая страница агентства дизайна

    Дизайн Джо — Целевая страница агентства дизайна

12. Просмотр минимальной концепции заголовка героя

    Минимальная концепция заголовка героя

13. View Collective • главная страница для компьютеров и мобильных устройств

    Коллективная • домашняя страница для компьютеров и мобильных устройств

14. Посмотреть Crypter® — торговую площадку NFT

    Crypter® — торговая площадка NFT

15. Просмотр компонента Crypter — темная тема

    Компонент шифрования — темная тема

16. Посмотреть целевую страницу портала вакансий

    Целевая страница портала вакансий

17. Посмотреть посадку Polylauch

    Посадка Polylauch

18. Просмотр веб-сайта GRADO — Создатель градиента

    GRADO — Веб-сайт Gradient Maker

19. Посмотреть luxone — Страница заказа

    luxone — Страница для заказа

20. View Outcrowd – запуск нового веб-сайта

    Outcrowd — запуск нового веб-сайта

21. Посмотреть ЭБКО

22. Посмотреть Абстрактное 3D Vol. 1

    Абстракция 3D Vol. 1

23. Просмотр Размытие. Серия – СейчасПлати

    Размытие. Серия – NowPay

24. View Collective • иллюстрации целевой страницы

    Коллективные • иллюстрации целевых страниц

Зарегистрируйтесь, чтобы продолжить или войдите в систему

Загрузка еще…

18 БЕСПЛАТНЫХ пастельных градиентов, созданных с помощью Divi’s Gradient Builder

Добавление градиента на ваш веб-сайт — отличный способ интегрировать цвет и добавить интересный фон на вашу страницу. Пастельные градиенты выглядят особенно потрясающе в веб-дизайне, поскольку они используют более светлые цвета для создания тонких переходов, улучшая страницу, но не перегружая ее. С новым конструктором градиентов Divi создать красивый градиент стало проще, чем когда-либо. Благодаря мощным функциональным возможностям и широким возможностям настройки вы можете создавать уникальные индивидуальные дизайны и добавлять их к любому элементу. В этом посте вы можете получить 18 БЕСПЛАТНЫХ пастельных градиентов, созданных с помощью конструктора градиентов Divi. Кроме того, мы покажем вам, как реализовать эти градиенты на вашем веб-сайте с помощью пошаговых инструкций.

Начнем!

Подпишитесь на наш канал Youtube

• 1 Краткий обзор
• 2 Скачать 18 БЕСПЛАТНЫХ пастельных градиентов
• 3 Скачать бесплатно
• 4 Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
• 5 Как добавить пастельные градиенты к вашему дизайну
  • 5.1 Создать новую страницу
  • 5.2 Добавление пастельных градиентов
• 6 Конечный результат
• 7 Последние мысли

Краткий обзор

Вот предварительный просмотр бесплатных градиентов.

Скачать 18 БЕСПЛАТНЫХ пастельных градиентов

Чтобы получить бесплатные пастельные градиенты, вам сначала нужно загрузить их, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на нашу рассылку, используя форму ниже. Как новый подписчик, вы будете получать еще больше возможностей Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже в списке, просто введите свой адрес электронной почты ниже и нажмите «Загрузить». Вы не будете «переподписываться» или получать дополнительные электронные письма.

Вы можете импортировать этот макет на свой веб-сайт, перейдя в библиотеку Divi. Нажмите кнопку «Импорт и экспорт» вверху, затем выберите вкладку «Импорт». Выберите загруженный файл и нажмите «Импорт». Макет теперь будет доступен в вашей библиотеке Divi.

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

Как добавить пастельные градиенты к вашему дизайну

Создать новую страницу

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

Добавьте новую страницу на свой веб-сайт и дайте ей название, затем выберите параметр «Использовать Divi Builder».

В этом примере мы будем использовать готовый макет из библиотеки Divi, поэтому выберите «Обзор макетов».

Найдите и выберите макет целевой страницы Telehealth.

Выберите «Использовать этот макет», чтобы добавить макет на страницу.

Теперь мы готовы построить наш дизайн.

Добавление пастельных градиентов

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

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

Вы можете скопировать фон, щелкнув правой кнопкой мыши раздел «Фон» в настройках модуля или щелкнув три точки рядом с «Фон» и выбрав «Копировать фон».

Хотя копирование и вставка фона из нашего макета — это самый простой способ воссоздать внешний вид в вашем собственном дизайне, вот настройки градиента, которые мы используем в этом уроке:

• Цвета градиента:
  • 5%: #eaeff2
  • 24%: #bfe4ff
  • 55%: #ceceff
  • 77%: #dfd1f9
  • 93%: #e6e3f5
  • 100%: #eaeff2
• Тип градиента: Эллиптический
• Положение градиента: Внизу справа

Теперь давайте откроем макет Telehealth и добавим фоновые градиенты. Вы можете вставить фоновый градиент в модуль, раздел или строку, щелкнув три точки или щелкнув правой кнопкой мыши в настройках раздела и выбрав «Вставить фон». Вы также можете вставить фон с помощью сочетания клавиш Ctrl + Alt + V при наведении курсора на модуль.

Начните с добавления градиентного фона в раздел «Изобретая велосипед».

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

• Положение градиента: вверху справа

Затем добавьте фоновый градиент к каждому круглому модулю-аннотации, окружающему изображение.

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

• h5 Цвет текста: #000000

• Инверсия изображения/значка: 100%

Затем добавьте градиент фона в строку «Стать участником сегодня» и модули отзывов в следующем разделе.