🎨

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

Создайте красивый CSS-градиент для сайта с живым предпросмотром

Открывали 422 разаВ избранном: 11

Тип градиента

Направление: 135°

Повторяющийся градиент (repeating)

Цветовые точки (2/10)

100%

CSS кодВендорные префиксы

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Дальше пригодится для дизайна

Генератор box-shadow

Красивые тени для блоков и кнопок

Генератор glassmorphism

Эффект матового стекла на CSS

Генератор палитры

Подобрать гармоничные цвета для градиента

Инструмент справился с вашей задачей?

Одно нажатие, без регистрации. По ответам мы решаем, какие инструменты дорабатывать первыми.

Ваш ответ здесь будет первым.

Этот инструмент ещё ждёт первого комментария

Нашли приём, остался вопрос или чего-то не хватило — напишите, пригодится следующим. Без почты и пароля · публикуем после проверки, обычно за 1–2 дня

Генератор градиентов CSS онлайн — создайте красивый фон для сайта бесплатно

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

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

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

Помимо CSS-кода, генератор предлагает несколько режимов предпросмотра: заливка блока, градиентный текст, кнопка и карточка профиля. Это позволяет оценить, как созданный градиент будет выглядеть в реальном контексте вашего интерфейса. Вы также можете скачать градиент в формате PNG-изображения (1200×630 пикселей), что удобно для создания обложек социальных сетей, баннеров и рекламных материалов. Все вычисления и генерация кода происходят локально в вашем браузере — настройки градиента не отправляются на сервер сайта.

Инструмент поддерживает все три типа CSS-градиентов, а также их повторяющиеся (repeating) версии. Линейный градиент (linear-gradient) создает переход цветов вдоль прямой линии — горизонтально, вертикально, по диагонали или под любым углом от 0 до 360 градусов. Радиальный градиент (radial-gradient) формирует переход от центральной точки наружу в виде эллипса или круга. Конический градиент (conic-gradient) — это переход цветов по окружности вокруг центральной точки, как цветовой круг.

Фронтенд-разработчикам и верстальщикам — для быстрого создания фонов, кнопок и декоративных элементов на HTML-страницах. Веб-дизайнерам — для подбора цветовых переходов и экспорта готового CSS в макеты. Начинающим программистам — для изучения синтаксиса CSS-градиентов через наглядный визуальный редактор. Маркетологам и SMM-специалистам — для создания красивых обложек и фонов через скачивание PNG. Владельцам сайтов на CMS (WordPress, Tilda, Bitrix) — для быстрого создания и вставки градиентного фона в стили темы.

Создание линейных (linear-gradient), радиальных (radial-gradient) и конических (conic-gradient) градиентов
До 10 цветовых точек с регулировкой позиции для каждой
8 быстрых направлений и плавный ползунок угла для линейного градиента
Выбор формы (круг/эллипс) и позиции центра для радиального типа
Режим повторяющегося градиента (repeating-gradient)
4 режима превью: блок, текст, кнопка и карточка
Библиотека из 20 готовых пресетов с мгновенным применением
Генератор случайных градиентов для вдохновения
Копирование полного CSS-кода или только значения градиента
Опция вендорных префиксов (-webkit-, -moz-, -o-)
Скачивание градиента как PNG-изображения 1200×630 px
Инверсия порядка цветовых точек одной кнопкой

ℹ️ О генераторе CSS-градиентов

Генератор CSS-градиентов на ТулФокс разработан для быстрого и удобного создания цветовых переходов для сайтов, приложений и графических материалов. Инструмент поддерживает все стандартные типы CSS-градиентов, включая linear-gradient, radial-gradient и conic-gradient с возможностью повторения.

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

💡

Создание градиентного фона

Веб-дизайнер хочет сделать красивый градиентный фон для hero-блока на сайте — переход от фиолетового к розовому.

Открывает генератор, выбирает linear-gradient 135deg, первый цвет #667eea, второй #764ba2.

Копирует готовый CSS: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); и вставляет в стили — фон готов за 30 секунд вместо подбора цветов в Photoshop.

🧠

Знаете ли вы?

🎨

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

🌈

Бывают линейные, радиальные и конические градиенты.

💻

Градиенты рендерятся браузером, что быстрее и качественнее PNG-фонов.

📱

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

🎯

Можно использовать несколько градиентов одновременно — будут накладываться.

⚡

CSS-градиенты поддерживаются всеми современными браузерами.

Сравнение типов CSS-градиентов

Характеристика	Линейный	Радиальный	Конический
CSS-функция	linear-gradient()	radial-gradient()	conic-gradient()
Направление	По прямой линии (угол)	От центра наружу	По окружности
Типичное применение	Фоны, кнопки, текст	Подсветка, сферы	Диаграммы, индикаторы
Параметры	Угол 0°–360°	Форма, позиция центра	Начальный угол, центр
Поддержка браузерами	Все современные	Все современные	Chrome 69+, Firefox 83+
Repeating-версия	Да	Да	Да

💡

Важно знать

Для красивых градиентов используйте близкие по тону цвета (из одной гаммы) — например, оттенки синего. Резкие контрасты (красный → зелёный) обычно выглядят дёшево. Чтобы быстро подобрать гармоничную пару цветов, воспользуйтесь нашим генератором цветовой палитры.

Как создать CSS-градиент — пошаговая инструкция

Выберите тип градиента

Определитесь с видом перехода: линейный (linear-gradient) — для прямолинейного перехода цветов, радиальный (radial-gradient) — для перехода от центра к краям, конический (conic-gradient) — для перехода по окружности. Каждый тип подходит для разных задач дизайна.

Настройте цвета и позиции

Выберите нужные цвета с помощью палитры или введите HEX-код вручную. Отрегулируйте позицию каждой цветовой точки ползунком (от 0% до 100%). Добавьте дополнительные точки кнопкой или кликом по шкале, удалите лишние через кнопку корзины.

Задайте направление или позицию

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

Скопируйте CSS-код

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

Примеры использования CSS-градиентов

🎨 Фон веб-страницы и секций

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

🔘 Градиентные кнопки и элементы управления

Кнопки с градиентным фоном привлекают внимание и увеличивают конверсию за счет визуального выделения на странице. Создайте яркий переход для CTA-кнопок, переключателей и вкладок. Используйте режим предпросмотра "Кнопка" для оценки результата.

✍️ Градиентный текст для заголовков

Через свойство background-clip: text можно применить градиент к тексту, создавая эффектные заголовки и акцентные надписи. Наш генератор показывает, как градиент будет выглядеть на тексте, в режиме предпросмотра "Текст".

📱 Обложки для соцсетей и баннеры

Функция скачивания градиента как PNG-файла (1200×630 px) идеально подходит для создания обложек групп ВКонтакте, постов Instagram, заголовков Telegram-каналов. Просто создайте градиент, нажмите кнопку скачивания и используйте готовое изображение как фон для макета.

🧩 Декоративные границы и разделители

Градиенты в CSS можно использовать для создания декоративных границ (border-image), разделительных линий между секциями, полос загрузки и индикаторов прогресса. Конический градиент отлично подходит для создания круговых диаграмм и индикаторов.

Частые вопросы о CSS-градиентах

Что такое CSS-градиент и для чего он нужен?

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

Как использовать генератор градиентов для создания фона сайта?

Выберите тип градиента, настройте цвета и направление, затем нажмите кнопку копирования CSS-кода. Вставьте полученный код в CSS-файл вашего сайта — например, в свойство background для body, div или секции. Если вы используете CMS типа WordPress, вставьте код в поле "Дополнительный CSS" в настройках темы. Для конструкторов типа Tilda код вставляется в HTML-блок.

В чем разница между линейным, радиальным и коническим градиентом?

Линейный градиент (linear-gradient) строит переход цветов вдоль прямой линии под заданным углом — от одной стороны элемента к другой. Радиальный (radial-gradient) создает переход от центральной точки к краям элемента в форме круга или эллипса. Конический (conic-gradient) распределяет цвета по окружности вокруг центра, как в цветовом круге. Линейный используется чаще всего, радиальный подходит для эффектов подсветки, а конический — для круговых диаграмм.

Поддерживают ли все браузеры CSS-градиенты?

Линейные и радиальные градиенты поддерживаются всеми современными браузерами, включая Chrome, Firefox, Safari, Edge и Opera. Конический градиент поддерживается с Chrome 69, Firefox 83 и Safari 12.1. Для старых браузеров включите опцию вендорных префиксов в генераторе — она добавит -webkit-, -moz- и -o- версии. В качестве запасного варианта рекомендуется указывать сплошной цвет перед градиентом.

Что такое повторяющийся градиент (repeating-gradient)?

Повторяющийся градиент (repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient) — это градиент, который автоматически дублируется, заполняя всю область элемента. Он создает полосатые или узорчатые паттерны. Чтобы получить видимый эффект повторения, цветовые точки должны занимать не всю шкалу (не от 0% до 100%), а только часть — например, от 0% до 20%. Включите переключатель "Повторяющийся градиент" и отрегулируйте позиции точек.

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

Чтобы применить градиент к тексту, нужно задать background с градиентом, добавить свойство background-clip: text (с префиксом -webkit-background-clip: text) и сделать текст прозрачным через -webkit-text-fill-color: transparent. Создайте градиент в генераторе, переключитесь в режим предпросмотра "Текст" для оценки результата, скопируйте значение градиента и добавьте указанные свойства.

Безопасно ли пользоваться онлайн-генератором?

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

Полезная информация

Используйте 2–3 цвета для элегантного результата — слишком много цветов создают визуальный шум

Для плавного перехода выбирайте цвета, близкие по цветовому кругу (аналоговые)

Контрастные цвета дают яркий, энергичный эффект — подходят для CTA-кнопок и акцентов

Повторяющийся градиент (repeating) отлично подходит для полосатых фонов и текстур

Комбинируйте несколько градиентов через запятую в свойстве background для сложных эффектов

Для текстового градиента добавьте background-clip: text и -webkit-text-fill-color: transparent

Тестируйте градиент на мобильных устройствах — на маленьких экранах переходы выглядят иначе

Для анимации градиента используйте CSS-переменные и свойство transition

Инструменты для CSS и дизайна

Градиент — лишь один из CSS-эффектов. Эти генераторы помогут оформить остальной интерфейс и собрать цельный стиль.

Генератор box-shadow

Тени для блоков, карточек и кнопок с живым превью.

Генератор glassmorphism

Эффект матового стекла с размытием фона на CSS.

Генератор border-radius

Скругление и сложные формы углов элемента.

Генератор CSS-фильтров

Blur, brightness, contrast и другие фильтры.

Генератор палитры

Подобрать гармоничные цвета для градиента.

Проверка контраста

Читабельность текста на градиентном фоне по WCAG.

Руслан АвдеевОт автора проекта
Все инструменты на ToolFox бесплатны, и я их дорабатываю сам. Напишите, если инструмент считает неверно, чего-то не хватает или что-то стоит поправить, — по таким комментариям я и решаю, чем заняться дальше.

Комментарии — мнения посетителей, прошедшие проверку по правилам сайта.