Градиент, то есть плавный переход одного цвета в другой, лежит в интерфейсе почти каждого сервиса, которым вы пользовались сегодня. Кнопка «Оплатить», фон сторис, иконка приложения, шапка лендинга. У одного дизайнера переход выглядит дорого, у другого напоминает заставку из нулевых. Инструмент при этом один и тот же.
Разница почти всегда в трёх вещах: какие цвета взяли, в каком порядке их поставили и что сделали с текстом поверх. В статье разберём все три: типы градиентов, как собрать чистый переход без грязи посередине, как сделать его в Figma, Photoshop и в коде, какие пять ошибок выдают новичка и куда градиент лучше не ставить вовсе.
Если с цветом вы пока на «вы», начните с материала «Цветовой круг Иттена: что это такое и как пользоваться». Половина проблем с градиентами решается именно там, до того как вы открыли редактор.
Незнакомые слова по ходу текста мы поясняем сразу, а если захочется общего справочника, у нас есть словарь графического дизайнера. Статья пригодится не только дизайнерам: градиенты сегодня собирают маркетологи для креативов, менеджеры для презентаций и селлеры для карточек на маркетплейсах.
А если хочется освоить ремесло системно, а не по обрывкам из ютуба, загляните в подборку курсов по графическому дизайну: там 265 программ, от коротких интенсивов до годовых с трудоустройством.
CheckroiПодборка курсов по графическому дизайну231 курс • 44 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Что такое градиент и почему он снова везде
Градиент — это заливка, в которой цвет меняется постепенно, без чёткой границы. Вместо «здесь синий, а здесь фиолетовый» вы получаете полосу, где синий медленно становится фиолетовым. В профессиональной речи такую заливку называют ещё цветовым переходом, и оба слова означают одно и то же.
Технически градиент задают цветовыми стопами (их ещё называют опорными точками): вы ставите точку, назначаете ей цвет, ставите вторую, назначаете второй цвет. Всё, что между ними, редактор досчитывает сам. Стопов может быть два, а может быть шесть.
Мода на градиенты возвращается волнами. В нулевых они были везде и всех утомили, в середине десятых их вытеснил плоский дизайн, а потом крупные бренды один за другим вернули цветовые переходы в айдентику. Держится это возвращение на вполне практических вещах.
- Он даёт объём почти бесплатно. Тонкий переход создаёт ощущение света и глубины там, где иначе понадобилась бы 3D-графика или фотография. Файл при этом весит копейки, а страница грузится быстро.
- Он работает как указатель. Глаз человека тянется к самому яркому и самому контрастному пятну на экране, и градиентом это пятно легко нарисовать ровно там, где стоит кнопка.
- Он несёт эмоцию. Один и тот же макет с холодным сине-зелёным переходом читается как «технологично и спокойно», а с оранжево-розовым как «молодёжно и громко».
Короткая формулировка. Градиент нужен не для красоты сам по себе, он решает одну из трёх задач: добавить глубину, увести взгляд в нужную точку или задать настроение. Если ни одна не стоит, лучше залить плашку одним цветом.
Виды градиентов: пять типов, которые встречаются в работе
В любом редакторе вы найдёте один и тот же набор. Названия могут отличаться, механика одинаковая.
| Тип | Как выглядит | Где чаще всего нужен |
|---|---|---|
| Линейный (Linear) | Цвет течёт вдоль прямой: сверху вниз, слева направо или по диагонали | Фоны, кнопки, шапки страниц, обложки постов |
| Радиальный (Radial) | Цвет расходится кругами от центра к краям | Свечение, объёмные кнопки, подсветка за объектом |
| Угловой, он же конический (Angular / Conic) | Цвет проворачивается вокруг точки, как стрелка часов | Круговые диаграммы, лоадеры, шкалы прогресса |
| Ромбовидный (Diamond) | Цвет расходится ромбом от центра | Декоративные плашки, редкий гость |
| Сетчатый, он же меш (Mesh) | Несколько цветовых пятен растекаются и смешиваются друг с другом | Живые многоцветные фоны, айдентика, обложки |
Линейный градиент
Самый частый и самый безопасный. Вы задаёте угол, то есть направление, вдоль которого течёт цвет, и две-три опорные точки. В девяти случаях из десяти, когда вам нужен «просто красивый фон», нужен именно линейный переход под углом примерно 135 градусов, из верхнего левого угла в нижний правый: так свет ложится привычно для глаза.
Радиальный градиент
Цвет идёт из центра наружу. Отлично имитирует источник света: если поставить светлую точку в центре и увести к тёмным краям, плоский круг сразу читается как шар. Второе применение: мягкое свечение под кнопкой или под товаром на карточке.
Угловой градиент
Цвет обходит круг, как стрелка на циферблате. Чистая утилитарщина: круговые диаграммы, индикаторы загрузки, кольцевые шкалы вроде «выполнено 70 %». Для фона его берут редко, он выглядит слишком механическим.
Ромбовидный градиент
Есть в Photoshop и Illustrator, встречается реже всех. Годится, когда нужно подчеркнуть геометрию макета, где уже есть ромбы и острые углы. В интерфейсах практически не используется.
Сетчатый градиент (mesh)
Здесь вместо линии или круга работает сетка узлов, и в каждом узле сидит свой цвет. Отсюда второе название, градиентная сетка. Пятна перетекают друг в друга, и получается тот самый «жидкий» разноцветный фон, который последние годы стоит на обложках отчётов и лендингах айти-компаний.
Сетчатый градиент рисуют либо в Adobe Illustrator инструментом Mesh, либо плагинами в Figma, либо в онлайн-генераторах, которые сразу отдают PNG. Руками с нуля собирать его новичку тяжело, и это нормально: почти все начинают с готовой заготовки и подкручивают цвета под себя.
Канал основателя Checkroi Вани Буявца3 700 человек читают мой Телеграм-канал про нейросетиСобрал промпты для Claude Code и ChatGPT, разборы ИИ-инструментов и лайфхаки по продвижению бизнеса в одном местеПрисоединитьсяЧто градиент делает с макетом
Прежде чем открывать редактор, полезно ответить себе на вопрос, зачем нужен градиент именно в этом макете. Задач у него ровно три.
Создаёт глубину. Ровная плашка выглядит как наклейка. Плашка с едва заметным переходом от чуть более светлого к чуть более тёмному выглядит как поверхность, на которую падает свет. Разница между цветами при этом может быть в пару процентов светлоты, и её никто сознательно не заметит, но макет станет живее.
Уводит взгляд. Допустим, на лендинге пять блоков и одна кнопка «Купить». Если фон страницы спокойный, а кнопка залита ярким переходом, взгляд пойдёт к ней сам. Это тот же механизм, что описан в статье про принцип контраста, просто вместо резкой границы работает мягкая.
Задаёт эмоцию. Цвета в переходе читаются как единое настроение. Сине-фиолетовый воспринимается технологичным, оранжево-жёлтый тёплым и дружелюбным, тёмно-синий с бирюзой серьёзным и «дорогим». На этом построена айдентика Spotify, Firefox, Кинопоиска, Asana и Wildberries: у каждого свой узнаваемый переход, который работает даже без логотипа.
Как собрать чистый градиент и не поймать грязь
Главная беда новичка выглядит так: взяли синий и оранжевый, потянули заливку, а посередине вылезла серо-бурая полоса, которую никто не заказывал.
Причина простая. Редактор не выбирает промежуточные цвета «на вкус», он честно считает путь от одного цвета к другому по прямой линии. Если ваши цвета стоят на противоположных сторонах цветового круга, эта прямая проходит через середину круга, а в середине круга сидит серый. Отсюда и грязь.
Избежать этого можно несколькими способами.
- Берите цвета из одной половины круга. Синий и фиолетовый, жёлтый и оранжевый, зелёный и бирюзовый. Соседи по кругу дают чистый переход почти всегда.
- Ставьте промежуточную точку. Если контрастная пара нужна по брендбуку, добавьте третий стоп посередине и уведите его цвет в сторону от серого. Путь перестанет идти через центр круга и пойдёт по дуге.
- Держите ровную насыщенность и светлоту. Когда один цвет яркий и светлый, а второй мутный и тёмный, середина проваливается независимо от оттенков. Проще всего выровнять оба параметра, а разницу оставить только в тоне.
Отдельная история — цветовое пространство, то есть математика, по которой считается переход. По умолчанию редакторы считают в sRGB, и это самый грубый вариант. В Illustrator и в новых версиях браузеров есть режимы LAB и OKLCH: они устроены ближе к тому, как цвет видит человеческий глаз, и переходы в них получаются заметно чище. Если инструмент такое умеет, включайте, разница видна сразу.
Правило на первое время. Пока не набьёте руку, собирайте градиенты из двух цветов, стоящих рядом на круге Иттена, с одинаковой насыщенностью. Такой переход промахнуться почти не даёт.
CheckroiПодборка курсов по Figma363 курса • 50 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Как сделать градиент в Figma за пять шагов
Figma остаётся основным редактором для интерфейсов и веба, и градиент там делается быстрее всего. Если вы в ней впервые, у нас есть подробная инструкция по работе с Figma, а здесь только по делу.
- Нарисуйте фигуру и оставьте её выделенной.
- Справа в блоке Fill нажмите на квадратик с цветом.
- В выпадающем списке смените Solid на Linear (или Radial, Angular, Diamond).
- На фигуре появится линия с двумя точками. Тяните её, чтобы задать направление, и кликайте по точкам, чтобы поменять цвета.
- Двойной клик по самой линии добавляет новую опорную точку, клавиша Delete на выделенной точке её убирает.
Полезное сверху: у каждой точки есть параметр непрозрачности. Если увести второй цвет в ноль, получится прозрачный градиент, которым удобно затемнять низ фотографии под подпись. Этот приём мы разберём подробнее в разделе про текст.
Для сетчатых градиентов в Figma ставят плагины: Mesh Gradient, Noise & Texture, Gradient Morph. Ищутся через Resources в верхней панели, ставятся в два клика, работают бесплатно в базовом объёме.
Градиент в Photoshop и Illustrator
В Photoshop за переходы отвечает инструмент Gradient Tool (горячая клавиша G). Выбираете его, сверху в панели настроек задаёте цвета и тип, зажимаете мышь на холсте и тянете: длина протяжки задаёт, насколько резким будет переход. Тянете коротко, получаете жёсткую границу; тянете через весь холст, получаете мягкую растяжку.
Второй путь в Photoshop: стиль слоя Gradient Overlay. Он накладывает переход поверх содержимого слоя и остаётся редактируемым: цвета можно поменять хоть через неделю, пиксели при этом не тронуты. Для рабочих файлов это почти всегда правильнее, чем заливка кистью. Если тема цвета в Photoshop вам вообще нова, посмотрите разбор инструментов цветокоррекции.
В Illustrator градиент живёт в панели Gradient и отличается тем, что он векторный: масштабируйте объект хоть до размера баннера на здании, переход останется гладким. Там же лежит инструмент Mesh для сетчатых заливок, и Illustrator в этом смысле до сих пор мощнее всех.
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в каналГрадиент в коде: что отдавать верстальщику
Момент, на котором спотыкаются почти все начинающие дизайнеры. Вы нарисовали красивый фон в Figma, отдали макет, и разработчик просит не картинку, а CSS. Дело в том, что браузер умеет рисовать градиенты сам, и это лучше картинки: ничего не грузится, ничего не мылится на больших экранах.
Выглядит это так. Линейный переход:
background: linear-gradient(135deg, #6C5CE7, #00B4D8);Первое значение — угол, дальше через запятую цвета в порядке следования. Радиальный отличается одним словом:
background: radial-gradient(circle at 50% 40%, #FFD166, #EF476F);А угловой пишется так, и именно из него делают круговые диаграммы без единой картинки:
background: conic-gradient(from 0deg, #06D6A0, #118AB2, #06D6A0);Хорошая новость: руками это писать не нужно. В Figma выделите фигуру, откройте вкладку Dev Mode или панель Inspect, и редактор отдаст готовую строку, которую можно скопировать разработчику. Онлайн-генераторы делают то же самое, если вы работаете вне Figma.
Дизайнеру эти три строки полезно узнавать в лицо по одной причине: когда верстальщик говорит «такое я сделаю кодом, картинка не нужна», вы понимаете, о чём речь, и не спорите зря. Подробности синтаксиса всегда можно свериться в документации MDN.
Готовые градиенты и генераторы: где брать и как не выглядеть как все
Собирать каждый переход с нуля не обязательно. Есть библиотеки готовых сочетаний и генераторы градиентов онлайн, где вы двигаете ползунки, а сервис сразу отдаёт и картинку, и строку CSS. Самые известные наборы, uiGradients и WebGradients, живут ещё и плагинами внутри Figma, так что вытаскивать ничего не придётся.
Работает это по-разному в зависимости от задачи.
- Нужен фон для учебного макета или личного проекта. Берите готовое сочетание и не мучайтесь. Никто не проверяет оригинальность фона в портфолио первого месяца.
- Нужен фон для клиента. Готовый набор годится как отправная точка, но цвета придётся подогнать под брендбук. Иначе лендинг банка будет светиться той же малиново-фиолетовой парой, что и половина шаблонов в интернете.
- Нужен градиент в айдентику. Только своими руками, от фирменных цветов. Логотип на чужом пресете живёт ровно до момента, когда клиент увидит тот же переход у конкурента.
Как подобрать красивые градиенты самому, если насмотренности пока мало: возьмите фирменный или просто понравившийся цвет, сдвиньте его по цветовому кругу на 20–40 градусов в любую сторону, слегка поднимите светлоту у второго цвета. Получится спокойная пара, которая почти наверняка сработает. Дальше можно смелеть.
Что стоит завести сразу. Отдельный файл с пятью-шестью удачными градиентами под ваши типовые задачи: фон, кнопка, обложка, затемнение фотографии. Через месяц он сэкономит вам часы и сделает работы визуально цельными.
CheckroiПодборка курсов по Adobe Photoshop461 курс • 45 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Пять ошибок, из-за которых градиент выглядит дёшево
Ошибка 1: полосы вместо плавного перехода
Вместо мягкой растяжки видны ступеньки, как на старом мониторе. Это называется бандинг, и виноват не ваш глаз: экрану или файлу не хватает оттенков, чтобы описать переход, и он округляет их до ближайших.
Лечится дизерингом, то есть добавлением едва заметного шума, который разбивает границы между ступенями. В Photoshop это Filter → Noise → Add Noise с монохромным режимом и значением 1–3 %, сверху лёгкое размытие по Гауссу радиусом около 0,5 пикселя. В Figma тот же эффект дают плагины с зерном. Побочный бонус: зернистые градиенты последние пару лет ещё и в моде.
Ошибка 2: серая зона посередине
Разобрали выше. Если между вашими цветами вылезло что-то землистое, вы взяли противоположные точки цветового круга. Ставьте промежуточную опорную точку или меняйте пару.
Ошибка 3: слишком много цветов
Пять стопов радуги в одной кнопке выглядят как рекламный баннер из 2007 года. Рабочий диапазон — два цвета, максимум три. Многоцветность допустима в сетчатых фонах, где пятна размыты и границ не видно, и почти никогда в мелких элементах интерфейса.
Ошибка 4: текст прямо поверх перехода
Самая дорогая ошибка: текст поверх перехода местами просто перестаёт читаться. Разберём отдельным разделом ниже.
Ошибка 5: макет ушёл в печать без подготовки
Экран светится, бумага отражает, и цвета живут в разных системах: экран в RGB, типография в CMYK. Яркий неоновый переход, который отлично смотрелся в Figma, на визитке станет тусклым, а плавная растяжка может лечь видимыми полосами.
Что делать перед отправкой в печать: перевести файл в CMYK и посмотреть, что стало с цветами; добавить лёгкий шум, он маскирует полосы на бумаге даже лучше, чем на экране; и обязательно спросить у типографии пробный оттиск, если тираж дорогой.
Читается ли текст на градиенте
Этот пункт обходят стороной почти все статьи про градиенты, а ломает макеты он чаще остальных. Логика такая: фон под текстом меняется по всей длине строки, значит контраст между буквами и фоном тоже меняется. В одном месте белый текст читается отлично, в другом сливается.
Ориентир взят из стандарта доступности WCAG: контраст обычного текста к фону должен быть не ниже 4,5:1, для крупных заголовков достаточно 3:1. Проверяют это бесплатными онлайн-чекерами контраста, куда вбиваются два цвета.
Фокус в том, что на градиенте проверять надо не один раз, а минимум три: в самой светлой точке фона, в самой тёмной и посередине. Если хотя бы одна проверка провалилась, текст в этом месте кто-то не прочитает.
Три приёма, которые чинят проблему.
- Подложка под текстом. Полупрозрачная плашка тёмного или светлого цвета под блоком с текстом. Самое надёжное решение, работает всегда.
- Затемняющий оверлей. Поверх градиента кладётся ещё один слой: от чёрного с непрозрачностью около 40 % в зоне текста к полной прозрачности дальше. Фон остаётся цветным, буквы читаются.
- Сдвинуть текст. Иногда достаточно перенести подпись в ту часть макета, где фон однороднее, и ничего дорисовывать не придётся.
Проверка за десять секунд. Уменьшите макет до размера превью и посмотрите на него прищурившись. Если строка где-то пропадает, значит контраста не хватает именно там, и никакой чекер уже не нужен.
Где градиент работает, а где вредит
| Элемент | Градиент уместен | Что учесть |
|---|---|---|
| Фон экрана или секции лендинга | Да | Держите переход спокойным, фон не должен спорить с контентом |
| Главная кнопка | Да | Одна такая кнопка на экран, иначе фокус рассыпается |
| Логотип | Да, но осторожно | Нужна запасная одноцветная версия для факса, гравировки и печати в одну краску |
| Обложка поста или карточка товара | Да | Проверяйте читаемость текста поверх |
| Мелкие иконки | Скорее нет | На 16–24 пикселях переход превращается в мутное пятно |
| Основной текст статьи | Нет | Градиентные буквы читаются заметно хуже сплошных |
| Таблицы и формы | Нет | Пёстрый фон мешает сравнивать данные и находить поля |
| Документы на печать в одну краску | Нет | Переход развалится на полосы или уйдёт в грязь |
Тренды 2026: что сейчас делают с градиентами
Мода на переходы не стоит на месте, и за последние пару лет сложилось несколько узнаваемых направлений. Общий контекст по визуальным трендам мы разбирали в статье про тренды веб-дизайна, здесь только про цвет.
Aurora. Размытые цветные пятна, будто северное сияние за матовым стеклом. Технически это тот же сетчатый градиент с сильным размытием. Держится на фонах лендингов уже третий сезон и уходить не собирается.
Зернистые градиенты. Переход плюс заметное зерно поверх. Начиналось как лекарство от бандинга, стало приёмом: зерно даёт ощущение плёнки и снимает с макета цифровую стерильность.
Стекло поверх цвета. Glassmorphism, то есть полупрозрачные «стеклянные» панели с размытием под ними, вернулся вместе с интерфейсом Liquid Glass в iOS. Работает он только на цветном фоне, поэтому потянул за собой новую волну градиентов.
Анимированные переходы. Цвета медленно перетекают друг в друга прямо на странице. Делается CSS-анимацией без единой картинки, стоит копейки по весу и заметно оживляет первый экран.
Градиентная типографика. Переход заливает сам заголовок, оставляя фон нетронутым. Приём эффектный, но применим строго к крупному тексту: на мелком кегле он убивает читаемость.
Чек-лист: проверьте свой градиент за минуту
Прогоните готовый макет по восьми пунктам, прежде чем отдавать его заказчику.
- Цвета стоят рядом на цветовом круге или между ними есть промежуточная точка.
- Посередине перехода нет серого или землистого пятна.
- Цветов в переходе два, максимум три.
- Полос и ступенек не видно, при необходимости добавлено зерно.
- Текст поверх проверен в светлой, тёмной и средней зоне фона.
- Контраст текста к фону не ниже 4,5:1 в каждой из этих зон.
- Для логотипа есть одноцветная запасная версия.
- Если макет идёт в печать, он переведён в CMYK и проверен глазами.
Восемь галочек закрывают процентов девяносто проблем, из-за которых градиент выглядит непрофессионально.
Где научиться работать с цветом
Градиент сам по себе осваивается за вечер: пять кнопок в Figma, две в Photoshop. Сложность начинается там, где нужно понимать, почему одно сочетание выглядит дорого, а другое дёшево, и как встроить переход в дизайн-систему проекта, чтобы он не спорил с остальными экранами. Этому учат в связке с колористикой, композицией и типографикой, а не отдельным уроком про заливку.
Если хотите разобраться в цвете основательно, а заодно посмотреть, какие направления вообще есть в профессии, начните с обзора видов дизайнеров и разбора того, как собрать макет сайта самому. Дальше выбирайте курсы по формату и бюджету: обучение графическому дизайну бывает и трёхмесячным интенсивом на вечерах, и годовой программой с наставником и защитой портфолио.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| Нейросети для изображений и видео Перейти на сайт курса |  Эдюсон | 47 504 ₽ | 3958 ₽/мес. | 2 месяца | Обзор курса |
| Профессия «2D-художник» Перейти на сайт курса |  Skillbox | 212 980 ₽ | 5450 ₽/мес. | 8 месяцев | Обзор курса |
| Профессия Бренд-дизайнер Перейти на сайт курса | Skillbox | 143 280 ₽ | 4622 ₽/мес. | 24 месяца | Обзор курса |
| Профессия «Графический дизайнер: расширенный курс» Перейти на сайт курса |  Нетология | 160 400 ₽ | 7496 ₽/мес. | 17 месяцев | Обзор курса |
| Графический дизайн и коммуникации Перейти на сайт курса | Нетология | 102 900 ₽ | 4743 ₽/мес. | 9 месяцев | Обзор курса |
| Профессия «Графический дизайнер» Перейти на сайт курса | Skillbox | 151 890 ₽ | 4900 ₽/мес. | 24 месяца | Обзор курса |
| Дизайн печатных изданий (графический дизайнер) Перейти на сайт курса | Skillbox | 40 170 ₽ | 3347 ₽/мес. | 4 месяца | Обзор курса |
| Профессия «Графический дизайнер с нуля до ПРО» Перейти на сайт курса |  Contented | 133 737 ₽ | 3715 ₽/мес. | 20 месяцев | Обзор курса |
| Иллюстрация и интерактивная графика Перейти на сайт курса | Нетология | 140 184 ₽ | 5841 ₽/мес. | 12 месяцев | Обзор курса |
| Иллюстрация на iPad Перейти на сайт курса | Skillbox | 44 366 ₽ | 2807 ₽/мес. | 1 месяц | Обзор курса |
Больше программ — в полном каталоге курсов по графическому дизайну
После курса вернитесь к чек-листу выше: половина пунктов начнёт срабатывать автоматически, ещё до того как вы потянете заливку.
