7 414 
В статье рассказывается:
- Виды градиентов и принципы использования
- Сферы применения градиентов
- Сервисы по подбору градиентов
- Как сделать градиент цвета в CSS
-
Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.Бесплатно от Geekbrains
Чтобы разобраться с тем, как сделать градиент цвета, необходимо сначала выяснить, что это и где применяется. Данный прием некогда все благополучно забыли, однако в последние годы использование градиентов стало снова набирать популярность.
Чтобы сделать градиент, необязательно учиться владеть Фотошопом, можно обойтись другими инструментами. В нашей статье мы расскажем, где лучше всего применять градиенты, разберем их виды и правила создания в CSS.
Виды градиентов и принципы использования
Градиент — это плавный и бесшовный переход между оттенками цветов. Этот визуальный эффект активно используется в дизайне — как всего объекта, так и его отдельных ключевых элементов. Градиенты бывают следующих видов:
- Линейные: цвета расположены по одной линии, но с разных сторон. Такими градиентами очень удобно заливать прямоугольные фигуры и области.
- Радиальные: оттенок или интенсивность меняются от краёв круга к центру. Этот градиент больше подходит для округлых фигур.
Какой бы переход цветов в виде градиента вы ни сделали, необходимо придерживаться трёх правил:
- Использовать два тона (в крайнем случае, три).
- Заливать градиентом только плоские графические элементы.
- Допускается использование внешних или внутренних теней для придания объёма фигуре.
Очевидно, что выстраивать градиенты можно по-разному. Кроме вышеперечисленных вариантов, есть и другие. Например, неравномерно смешивать оттенки, чтобы дизайн получится более оригинальным, чем у конкурентов. При помощи градиентных сеток можно искажать поверхность и создавать неравномерные формы.
Сферы применения градиентов
Иллюстрации и графический дизайн
Градиенты очень популярны: их широко применяют в дизайне полиграфической продукции — от визитки до огромного билборда или глянцевого журнала. Мы видим их на концертных афишах, упаковках товаров, баннерах в интернете. Назначение градиента не сводится лишь к созданию красочного фона, градиентную заливку используют для перекрытия изображений или выделения самых важных элементов дизайна.
При помощи градиентных переходов можно выделять небольшие фрагменты текста на фоне, “оживлять” фотографии, придавать им перспективу (если дополнить градиенты правильно наложенными тенями), чтобы сделать их более атмосферными.
Айдентика (фирменный стиль, логотипы)
Всего пару лет назад дизайнеры единодушно считали градиенты атавизмом из 90-х, когда ими заливали логотипы. Однако проблема не в самом приёме, а в огрехах, присущих фирменным знакам того периода. Градиенты, действительно, встречались на многих тогдашних логотипах, отсюда их дурная слава.
На сегодняшний день заливка градиентом логотипа и элементов типографики вновь вошла в моду, этот приём считается свежим и оригинальным. При помощи цветовых плавных переходов дизайнеры выделяют кнопки, отдельные фрагменты текста, заголовки, иконки, чтобы сделать их заметнее.
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Скачивайте и используйте уже сегодня:
Топ-30 самых востребованных и высокооплачиваемых профессий 2023
Поможет разобраться в актуальной ситуации на рынке труда
Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка
Только проверенные нейросети с доступом из России и свободным использованием
ТОП-100 площадок для поиска работы от GeekBrains
Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽
Упаковка продукции
Полупрозрачные области плюс градиент — распространённая “фишка” в дизайне упаковок, а также в оформлении интерьеров. Градиент из нескольких цветов делают на флаконах с косметикой, бутылках с напитками, пачках сладостей, и т. п. Показательный пример — премиальная линия уходовых средств для волос от Dove, где на упаковках можно встретить градиенты.
Самые трендовые градиенты для упаковок сопровождаются голографическими эффектами. Упаковка переливается несколькими оттенками и ещё больше притягивает внимание покупателя.
Веб-дизайн и SMM
В веб-дизайне градиенты из нескольких цветов стали делать начиная с 2016 г. в рамках плоского дизайна, который был популярен с 2014 г. и включал всего 32 базовых оттенка. Первопроходцами здесь стали крупные корпорации и мировые бренды: они всегда в поиске новых способов выделиться, особенно в интернете.
Используя горизонтальные или вертикальные градиенты, можно направлять внимание пользователя туда, куда нужно, например, к CTA-кнопкам или формам обратной связи. В подобных случаях начальная точка движения взгляда пользователя должна иметь более светлую заливку, а конечная — более насыщенную по цвету. Этот приём постоянно эксплуатируется на продающих сайтах и в интернет-магазинах.
Читайте также!
Кроме того, если на сайте сделать градиент из нескольких цветов, можно придать глубину фоновым фотографиям и картинкам, повысить их качество, добавить новых смыслов в дизайн. Оригинальные и необычные цветовые решения получаются за счёт смешивания различных оттенков.
Сервисы по подбору градиентов
- WebGradients
Фактически, это библиотека готовых градиентов из разных цветов, делать самому ничего не надо, только использовать уже предложенные варианты. В сборнике всего 180 градиентов. Инструмент можно загружать как в формате Sketch, так и в традиционном PSD (см. ссылку в верхней части портала).
Градиенты можно выкачать в виде CSS-кода и затем вставить его прямо на сайт.
- uiGradients
Ещё один сборник градиентов со множеством готовых решений. Посмотреть все варианты можно, кликнув по находящейся в верхней части страницы кнопке “Show all gradients”. На портале вы найдёте все необходимые типовые элементы веб-интерфейса и можете выбрать понравившийся, а затем загрузить его (JPG-картинкой или в виде кода).
- CSS-аниматор градиентов
Веб-сервис позволяет воплотить самые дерзкие дизайнерские фантазии и сделать градиент того или иного цвета на чистом CSS, без JavaScript. Для этого достаточно кликнуть “Add color” на боковой панели. Появится табличка, из которой можно выбирать нужные оттенки для двух основных цветов градиента. Интенсивность перехода тоже можно подкрутить, а затем полюбоваться результатом.
- Colorzilla
Трудно найти веб-дизайнера, не слышавшего об этом сервисе. Он был одним из первых онлайн-инструментов, разработанных в помощь дизайнерам специально для создания красивых градиентов. И профессионалы продолжают пользоваться им.
- ColorSpace
Превосходный сервис для составления цветовых схем. Помимо прочего, на портале есть собственный генератор градиентов, позволяющий расширять представленную библиотеку вариантов. Интерфейс очень удобен, но есть ограничение: выбрать один и тот же цвет в различных сочетаниях можно лишь дважды. Преимущество ColorSpace — в возможности сделать сложный градиент более чем из двух цветов.
Скачать файл- Бесконечные градиенты
Все операции с градиентами вынесены в верхнюю навигационную панель: это блокировка, добавление, редактирование различных опций выбранного вами шаблона. Очень удобно перетягивать холсты мышью и настраивать необходимые переходы, а затем копировать код градиентной заливки, чтобы вставить его в 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%);
}
на обучение «Дизайнер» до 24 ноября
Радиальный градиент radial-gradient()
В радиальном градиенте цвета исходят из центра фигуры и равномерно распространяются наружу, к краям, образуя эллипс или правильный круг.
background: radial-gradient (направление градиента / размер / точка центра, первый оттенок, второй оттенок и т.д.);
Чтобы сделать градиент цвета радиальным, используйте ключевое слово circle или ellipse. Если не уточнить, то радиальный градиент по умолчанию будет эллиптическим.
div {
height: 200px;
background: radial-gradient(white, #FFA9A1);
}
ТОП-100 площадок для поиска работы от GeekBrains
20 профессий 2023 года, с доходом от 150 000 рублей
Чек-лист «Как успешно пройти собеседование»
Центральная точка тоже задаётся ключевыми словами в 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);
}
Градиенты — это мощное изобразительное средство для дизайнера. Сделать градиент из двух-трёх цветов несложно, и в этом могут помочь множество онлайн-сервисов. Сочетайте различные элементы, играйте с оттенками, не бойтесь экспериментов!
0 
Разберем 11 самых важных жизненных вопросов
Только до 
Эксклюзивные лекции по основам программирования
