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

Приведем к оферу в международной IT компанииАнглийский для IT

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

Что такое градиенты в CSS и почему они полезны

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

Основные типы градиентов:

• linear-gradient — линейный переход цветов вдоль прямой линии (вертикально, горизонтально или под углом)
• radial-gradient — радиальный переход от центральной точки к краям (круговой или эллиптический)
• conic-gradient — конический переход цветов вокруг центральной точки (как цветовой круг)
• repeating-linear-gradient / repeating-radial-gradient — повторяющиеся паттерны градиентов

Практическая польза градиентов выходит далеко за рамки эстетики. Вы можете создавать кнопки с объёмным эффектом, фоны hero-секций, декоративные разделители, имитацию материалов (металл, стекло, глянец) и даже сложные паттерны — всё это без единого графического файла. В 2025 году градиенты используются в 67% топовых веб-сайтов согласно HTTP Archive — цифра, которая говорит сама за себя.

Характеристика	Изображение PNG/JPG	CSS-градиент
Размер файла	5-50 КБ	~100 байт кода
HTTP-запросы	+1 запрос	0 запросов
Масштабирование	Потеря качества	Векторное, идеальное
Редактирование	Нужен редактор	Прямо в коде
Анимация	Сложная	Нативная поддержка

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

---

Екатерина Соловьёва, Senior UI/UX Designer

Когда я переделывала лендинг для финтех-стартапа, дизайнер передал макет с тяжёлыми PNG-фонами на каждой секции. Сайт грузился 4,2 секунды на мобильных. Я заменила все изображения на CSS-градиенты — время загрузки упало до 1,8 секунд. Конверсия выросла на 23%. Клиент не поверил, что такой результат дали "какие-то строчки кода". Но цифры не врут — градиенты работают.

---

Основы создания линейного градиента в CSS

Функция linear-gradient() — фундамент работы с градиентами. Синтаксис базового линейного градиента выглядит так:

background: linear-gradient(направление, цвет1, цвет2);

Направление задаётся несколькими способами:

• Ключевые слова: to top, to bottom, to left, to right, to top right (диагонали)
• Градусы: 0deg (снизу вверх), 90deg (слева направо), 180deg (сверху вниз), 45deg (диагональ)
• По умолчанию: если не указать направление, градиент пойдёт сверху вниз (180deg)

Примеры базовых градиентов:

background: linear-gradient(to right, #3498db, #2ecc71); — горизонтальный переход от синего к зелёному

background: linear-gradient(45deg, #e74c3c, #f39c12); — диагональный переход от красного к оранжевому

background: linear-gradient(to bottom, #1a1a1a, #4a4a4a); — вертикальный тёмный градиент

Контроль цветовых остановок (color stops) даёт абсолютную власть над распределением цветов. По умолчанию браузер размещает цвета равномерно, но вы можете указать точные позиции:

background: linear-gradient(90deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);

Здесь красный начинается с 0%, бирюзовый находится точно посередине (50%), а голубой заканчивает градиент на 100%. Вы можете создавать резкие переходы, размещая цветовые остановки близко друг к другу:

background: linear-gradient(90deg, #000 0%, #000 49%, #fff 50%, #fff 100%); — создаёт чёткую границу между чёрным и белым на 50%

Для создания полупрозрачных градиентов используйте формат rgba:

background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); — классический оверлей для текста поверх изображений

Синтаксис направления	Результат	Применение
to right	Слева направо →	Прогресс-бары, кнопки
to bottom	Сверху вниз ↓	Hero-секции, хедеры
45deg	Диагональ ↗	Динамичные фоны
135deg	Диагональ ↘	Карточки, блоки контента
to top right	К верхнему правому углу	Акцентные элементы

---

Дмитрий Волков, Frontend Developer

На собеседовании мне дали задачу: сделать кнопку с градиентом, которая меняет направление при наведении. Джун рядом со мной писал JavaScript. Я обошёлся тремя строками CSS с transition на background-position. Меня взяли. Понимание градиентов отличает специалиста, который знает инструменты, от того, кто их гуглит.

---

Как создать радиальные градиенты для круговых эффектов

Функция radial-gradient() создаёт градиент, исходящий из центральной точки по радиусу — как круги на воде. Базовый синтаксис:

background: radial-gradient(форма размер at позиция, цвет1, цвет2);

Форма градиента может быть двух типов:

• circle — идеальный круг
• ellipse — эллипс (по умолчанию, адаптируется под пропорции элемента)

Размер определяет, где заканчивается градиент:

• closest-side — до ближайшей стороны элемента
• farthest-side — до дальней стороны
• closest-corner — до ближайшего угла
• farthest-corner — до дальнего угла (по умолчанию)
• Конкретные значения — 100px, 50% и т.д.

Позиция задаётся через at x y, где x и y — координаты центра градиента:

background: radial-gradient(circle at center, #ff6b6b, #4ecdc4); — круг из центра

background: radial-gradient(ellipse at top left, #667eea, #764ba2); — эллипс из левого верхнего угла

background: radial-gradient(circle at 30% 40%, #f39c12, #e74c3c, #000); — круг со смещённым центром

Радиальные градиенты особенно эффективны для создания:

• Spotlight-эффектов на фоне
• Кнопок с объёмным свечением
• Имитации источников света
• Виньетирования (затемнение краёв)
• Пульсирующих анимаций (в связке с CSS-анимациями)

Пример сложного радиального градиента с несколькими остановками:

background: radial-gradient(circle at 50% 50%, #fff 0%, #e0e0e0 20%, #bdbdbd 40%, #757575 80%, #212121 100%);

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

Для создания виньетки (затемнения по краям изображения) используйте прозрачный центр:

background: radial-gradient(ellipse at center, transparent 0%, transparent 30%, rgba(0,0,0,0.7) 100%);

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

Конические градиенты: синтаксис и применение

Функция conic-gradient() — самый молодой тип градиентов в CSS, получивший полную браузерную поддержку только в 2020 году. Конический градиент распределяет цвета по кругу вокруг центральной точки, как срезы пирога. Синтаксис:

background: conic-gradient(from угол at позиция, цвет1, цвет2);

Параметры:

• from угол — начальный угол градиента (по умолчанию 0deg = верхняя точка)
• at позиция — координаты центра вращения (по умолчанию center)
• Цветовые остановки — цвета с угловыми позициями (0deg - 360deg)

Базовые примеры:

background: conic-gradient(#ff6b6b, #4ecdc4, #45b7d1, #ff6b6b); — плавный переход по кругу

background: conic-gradient(from 90deg, red, yellow, lime, aqua, blue, magenta, red); — цветовое колесо, начинающееся справа

background: conic-gradient(from 0deg at 40% 60%, #667eea 0deg, #764ba2 180deg, #667eea 360deg); — градиент со смещённым центром

Создание pie-chart (круговой диаграммы) без JavaScript:

background: conic-gradient(#3498db 0deg 120deg, #2ecc71 120deg 240deg, #e74c3c 240deg 360deg);

Этот код создаёт три сегмента: синий занимает 120° (33.3%), зелёный — следующие 120°, красный — оставшиеся 120°. Резкие переходы между цветами создают чёткие границы секторов. Для диаграммы с процентным соотношением 60% / 25% / 15%:

background: conic-gradient(#667eea 0deg 216deg, #f093fb 216deg 306deg, #4facfe 306deg 360deg);

Где 216° = 60% от 360°, 306° = (60% + 25%) от 360°.

Конические градиенты превосходно работают для создания loading-спиннеров. Комбинируя градиент с CSS-анимацией rotation:

background: conic-gradient(transparent 0deg 270deg, #667eea 270deg 360deg);

В связке с animation: rotate 1s linear infinite; получается плавный круговой загрузчик без единой строки JavaScript или SVG.

Продвинутая техника — создание repeating-conic-gradient для полосатых паттернов:

background: repeating-conic-gradient(from 0deg, #667eea 0deg 10deg, #764ba2 10deg 20deg);

Этот код создаёт радиальные полосы, повторяющиеся каждые 20° по кругу — эффект, который раньше требовал сложного SVG.

Продвинутые техники работы с CSS-градиентами

Настоящая мощь градиентов раскрывается при использовании продвинутых техник: наслоение, маскирование, анимация и комбинирование с другими CSS-свойствами. Начнём с множественных градиентов.

Наслоение градиентов

CSS позволяет применять несколько градиентов к одному элементу, разделяя их запятой. Каждый последующий градиент располагается под предыдущим:

background: linear-gradient(45deg, rgba(255,255,255,0.2) 0%, transparent 100%), linear-gradient(135deg, #667eea 0%, #764ba2 100%);

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

Создание сложных паттернов через наслоение:

background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px), linear-gradient(to bottom, #1e3c72, #2a5298);

Результат — диагональные полосы поверх градиентного фона, популярный паттерн для прогресс-баров и loading-состояний.

Техника	Применение	Сложность
Множественные градиенты	Сложные фоны, текстуры	Средняя
Градиенты с прозрачностью	Оверлеи, виньетки	Низкая
Анимированные градиенты	Динамические кнопки, фоны	Средняя
Градиенты в масках	Fade-эффекты текста	Высокая
Градиенты в border-image	Цветные рамки	Средняя

Анимация градиентов

Градиенты нельзя анимировать напрямую через transition — браузеры не умеют интерполировать значения функций градиентов. Но существует проверенный workaround через изменение размера и позиции фона:

background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #667eea); background-size: 300% 300%; transition: background-position 0.5s ease;

element:hover { background-position: 100% 50%; }

Увеличенный background-size позволяет браузеру плавно сдвигать градиент при наведении, создавая иллюзию анимации цветов. Для бесконечной анимации используйте CSS-анимации:

@keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

animation: gradient-shift 3s ease infinite;

Градиентные рамки через border-image

Стандартное свойство border не поддерживает градиенты, но border-image решает проблему:

border: 4px solid; border-image: linear-gradient(45deg, #667eea, #764ba2) 1;

Цифра 1 в конце — это border-image-slice, определяющий, как градиент нарезается на части для каждой стороны рамки. Для более сложного контроля используйте псевдоэлементы:

position: relative; background: white; padding: 20px;

.element::before { content: ''; position: absolute; inset: 0; padding: 4px; background: linear-gradient(45deg, #667eea, #764ba2); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

Эта техника создаёт настоящую градиентную рамку с полным контролем над толщиной и внутренним содержимым.

Текст с градиентом

Применение градиента к тексту требует комбинации нескольких свойств:

background: linear-gradient(45deg, #667eea, #764ba2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;

Свойство background-clip: text обрезает фон по форме букв, а transparent цвет позволяет градиенту проявиться. Префикс -webkit- всё ещё необходим для Safari.

Градиенты для создания форм

Резкие переходы в градиентах позволяют создавать геометрические формы без дополнительных элементов:

background: conic-gradient(red 0deg 90deg, blue 90deg 180deg, green 180deg 270deg, yellow 270deg 360deg); — квадрат, разделённый на четыре цветных секции

background: linear-gradient(to right, transparent 40%, red 40%, red 60%, transparent 60%); — вертикальная полоса в центре элемента

Эти техники используются для создания чекбоксов, переключателей, индикаторов прогресса — всё без изображений.

Оптимизация производительности

Сложные градиенты с множеством остановок могут нагружать GPU при анимации. Рекомендации:

• Используйте transform вместо изменения размеров элементов с градиентами
• Применяйте will-change: transform для анимированных элементов
• Избегайте градиентов на элементах, которые часто перерисовываются
• Кешируйте сложные градиенты через CSS-переменные
• Используйте GPU-акселерацию через translate3d(0,0,0) для критичных элементов

Пример оптимизированного анимированного градиента:

.optimized-gradient { background: linear-gradient(45deg, #667eea, #764ba2); will-change: transform; transform: translate3d(0,0,0); }

---

Градиенты в CSS — это не декорация, а структурный элемент современного веб-дизайна. Вы получили синтаксис linear, radial и conic градиентов, научились контролировать цветовые остановки, позиционирование и форму. Освоили продвинутые техники: наслоение, анимацию, градиентные рамки и текст. Теперь применяйте это на практике — замените хотя бы один PNG-фон в текущем проекте на CSS-градиент и измерьте разницу в производительности. Градиенты работают, цифры это подтверждают, браузеры их поддерживают. Остальное зависит от вашей готовности использовать инструменты профессионально, а не поверхностно. 🚀

---

Комментарии