Только до 28.11
Вечерний «Путь в ИТ» с Иваном Ургантом
Кнопка закрыть топ-бар
ГлавнаяБлогКак сделать градиент цвета: полезные сервисы и работа с CSS
Дизайн сайта в Figma
27.07.2022
2 219
Время чтения: 17 минут

Как сделать градиент цвета: полезные сервисы и работа с CSS

27.07.2022
2 219
Время чтения: 17 минут
Сохранить статью:
Сохранить статью:
В статье рассказывается:  
  1. Виды градиентов и принципы использования
  2. Сферы применения градиентов
  3. Сервисы по подбору градиентов
  4. Как сделать градиент цвета в CSS
  5. Пройди тест и узнай, какая сфера тебе подходит:
    айти, дизайн или маркетинг.
    Бесплатно от Geekbrains

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

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

Виды градиентов и принципы использования

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

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

Какой бы переход цветов в виде градиента вы ни сделали, необходимо придерживаться трёх правил:

  • Использовать два тона (в крайнем случае, три).
  • Заливать градиентом только плоские графические элементы.
  • Допускается использование внешних или внутренних теней для придания объёма фигуре.

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

Сферы применения градиентов

Иллюстрации и графический дизайн

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

При помощи градиентных переходов можно выделять небольшие фрагменты текста на фоне, “оживлять” фотографии, придавать им перспективу (если дополнить градиенты правильно наложенными тенями), чтобы сделать их более атмосферными.

Сферы применения градиентов
Сферы применения градиентов

Айдентика (фирменный стиль, логотипы)

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

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

Упаковка продукции

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

Самые трендовые градиенты для упаковок сопровождаются голографическими эффектами. Упаковка переливается несколькими оттенками и ещё больше притягивает внимание покупателя.

Веб-дизайн и SMM

В веб-дизайне градиенты из нескольких цветов стали делать начиная с 2016 г. в рамках плоского дизайна, который был популярен с 2014 г. и включал всего 32 базовых оттенка. Первопроходцами здесь стали крупные корпорации и мировые бренды: они всегда в поиске новых способов выделиться, особенно в интернете.

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

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

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

Сервисы по подбору градиентов

  • WebGradients

Фактически, это библиотека готовых градиентов из разных цветов, делать самому ничего не надо, только использовать уже предложенные варианты. В сборнике всего 180 градиентов. Инструмент можно загружать как в формате Sketch, так и в традиционном PSD (см. ссылку в верхней части портала).

Градиенты можно выкачать в виде CSS-кода и затем вставить его прямо на сайт.

Сервисы по подбору градиентов
Сервисы по подбору градиентов
  • uiGradients

Ещё один сборник градиентов со множеством готовых решений. Посмотреть все варианты можно, кликнув по находящейся в верхней части страницы кнопке “Show all gradients”. На портале вы найдёте все необходимые типовые элементы веб-интерфейса и можете выбрать понравившийся, а затем загрузить его (JPG-картинкой или в виде кода).

  • CSS-аниматор градиентов

Веб-сервис позволяет воплотить самые дерзкие дизайнерские фантазии и сделать градиент того или иного цвета на чистом CSS, без JavaScript. Для этого достаточно кликнуть “Add color” на боковой панели. Появится табличка, из которой можно выбирать нужные оттенки для двух основных цветов градиента. Интенсивность перехода тоже можно подкрутить, а затем полюбоваться результатом.

  • Colorzilla

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

  • ColorSpace

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

ТОП-30 IT-профессий
2022 года с доходом
от 200 000 ₽
Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.
Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Александр Сагун
Александр Сагун
Исполнительный
директор Geekbrains
pdf иконка

Топ-30 самых востребованных и высокооплачиваемых профессий 2022

Поможет разобраться в актуальной ситуации на рынке труда

doc иконка

Подборка 50+ ресурсов об IT-сфере

Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT

pdf иконка

ТОП 50+ сервисов и приложений от Geekbrains

Безопасные и надежные программы для работы в наши дни

pdf 3,7mb
doc 1,7mb
Уже скачали 16049 pdf иконка
  • Бесконечные градиенты

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

  • Градиентные кнопки

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

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

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

Линейный градиент linear-gradient()

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

Без указания направления градиентный переход выстраивается сверху вниз.

Распределение цветов по умолчанию идёт равномерно. Его направление перпендикулярно линии градиента.

Общая схема прописывания стилей: background: linear-gradient (угол наклона / или же сторона, обозначенная одним-двумя ключевыми словами, первый оттенок, второй оттенок, остальные свойства);

Как задать направление градиента:

либо указать точный угол отклонения от оси (в deg, градусах) — это будет угол наклона линии градиента в элементе:

div {

height: 200px;

background: linear-gradient(45deg, #EECFBA, #C5DDE8);

}

либо обозначить направление ключевым словом (to top, to bottom, to right, to left) — они в точности соответствуют углам 0deg, 180deg, 90deg, 270deg:

div {

height: 200px;

background: linear-gradient(to right, #F6EFD2, #CEAD78);

}

Если использовать ключевые слова для задания градиента (к примеру, to bottom right), то градиентный переход кончится в этой точке, а начнётся в противоположной (то есть, слева вверху).

div {

height: 200px;

background: linear-gradient(to top left, powderblue, pink);

}

Если вы хотите сделать свой градиент цвета неравномерным, то укажите начальные позиции для каждого оттенка и color stops — точки остановки градиента — в процентах. 0 % соответствует нулевой точке, 100 % — конечной.

div {

height: 200px;

background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%);

}

Если вы хотите добиться эффекта чётких полос, а не плавных переходов цвета, то начинайте каждый новый цвет ровно с точки остановки предыдущего:

div {

height: 200px;

background: linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%);

}

Радиальный градиент radial-gradient()

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

background: radial-gradient (направление градиента / размер / точка центра, первый оттенок, второй оттенок и т.д.);

Чтобы сделать градиент цвета радиальным, используйте ключевое слово circle или ellipse. Если не уточнить, то радиальный градиент по умолчанию будет эллиптическим.

div {

height: 200px;

background: radial-gradient(white, #FFA9A1);

}

Только до 28.11
Как за 3 часа
разбираться в IT
лучше, чем 90%
новичков и выйти на
доход в 200 000 ₽?
Приглашаем вас на бесплатный онлайн-интенсив «Путь в IT»! За несколько часов эксперты GeekBrains разберутся, как устроена сфера информационных технологий, как в нее попасть и развиваться.
Александр Волчек CEO GeekBrains

Интенсив «Путь в IT» поможет:

  • За 3 часа разбираться в IT лучше, чем 90% новичков.
  • Понять, что действительно ждет IT-индустрию в ближайшие 10 лет.
  • Узнать как по шагам c нуля выйти на доход в 200 000 ₽ в IT.
При регистрации вы получите в подарок:
pdf иконка

«Колесо компетенций»

Тест, в котором вы оцениваете свои качества и узнаете, какая профессия в IT подходит именно вам

doc иконка

«Критические ошибки, которые могут разрушить карьеру»

Собрали 7 типичных ошибок, четвертую должен знать каждый!

pdf иконка

Тест "Есть ли у вас синдром самозванца?"

Мини-тест из 11 вопросов поможет вам увидеть своего внутреннего критика

Хотите сделать первый шаг и погрузиться в мир информационных технологий? Регистрируйтесь и смотрите интенсив:
Только до 28 ноября
Осталось 17 мест

Центральная точка тоже задаётся ключевыми словами в background-position с добавлением приставки at. По умолчанию это свойство имеет значение at center.

div {

height: 200px;

background: radial-gradient(at top, #FEFFFF, #A7CECC);

}

Размер эллиптического градиента задаётся в процентах, пикселях или em. Всего таких значений два: первое — ширина эллипса, второе — его высота.

div {

height: 200px;

background: radial-gradient(40% 50%, #FAECD5, #CAE4D8);

}

Для указания размера градиента используются специальные ключевые слова. Дефолтное значение — farthest-corner (в дальний угол).

Значение Описание
closest-side Расчёт размера ведётся по расстоянию до любой ближайшей из сторон (в случае circle) либо до ближайших сторон по осям Y и X (в случае ellipse)
farthest-side Расчёт размера ведётся по расстоянию до дальних сторон
closest-corner Расчёт размера ведётся до ближайших углов
farthest-corner Расчёт размера ведётся до дальних углов

div {

height: 200px;

background: radial-gradient(circle farthest-corner at 100px 50px, #FBF2EB, #352A3B);

}

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

Оцените статью
Рейтинг: 5
( голосов 1 )
Поделиться статьей
Добавить комментарий

Забрать
гарантированный
подарок

Получите бесплатно подборку файлов от GeekBrains:

Осталось 17 мест

Поздравляем! Вы выиграли 4 курса по ИТ профессиям. Чтобы закрепить подарок и получить к нему доступ, заполните информацию в открывшемся окне

×
Петр Озеров
Петр Озеров печатает ...