Бесплатный генератор CSS-градиентов — создайте линейные, радиальные и конические градиенты

Создавайте красивые CSS-градиенты с помощью этого бесплатного онлайн-генератора градиентов. Выберите тип градиента — линейный, радиальный или конический, настройте цвета и углы, а затем мгновенно скопируйте CSS-код.

Что такое CSS-градиент?

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

Существует три основных типа CSS-градиентов:

• Линейные градиенты переходят между цветами вдоль прямой линии, определяемой углом или направлением.
• Радиальные градиенты расходятся от центральной точки, создавая круговые или эллиптические узоры.
• Конические градиенты переходят между цветами вокруг центральной точки в виде вращательного смещения, похожего на цветовой колес.

Как использовать этот генератор градиентов

1. Выберите тип градиента — выберите Линейный, Радиальный или Конический в верхней части панели управления.
2. Установите направление — для линейных и конических градиентов настройте угол с помощью ползунка или кнопок быстрого выбора.
3. Настройте параметры радиального градиента — для радиальных градиентов выберите форму (круг или эллипс) и ключевое слово размера.
4. Редактируйте цветовые остановки — нажмите на палитру цветов, чтобы изменить цвет каждой остановки. Перетащите ползунок позиции, чтобы настроить, где будет отображаться каждый цвет.
5. Добавьте или удалите цвета — нажмите кнопку "Добавить цвет", чтобы добавить больше остановок (до 8), или нажмите X, чтобы удалить остановку (минимум 2).
6. Используйте предустановки — нажмите на любой элемент предустановки, чтобы загрузить готовый градиент.
7. Скопируйте CSS — нажмите "Копировать CSS", чтобы скопировать полное свойство background в буфер обмена.

Основные функции

Функция	Преимущество
Три типа градиентов	Линейные, радиальные и конические — поддерживаются все режимы CSS-градиентов
Живой превью	Смоделируйте свой градиент в реальном времени при изменении настроек
До 8 цветовых остановок	Создавайте сложные многоцветные градиенты с точным позиционированием
Контроль угла	Ползунок + кнопки быстрого выбора для распространенных углов (0°–315°)
Форма и размер радиального градиента	Круг/эллипс с четырьмя ключевыми словами размера в CSS
Однокликовые предустановки	Шесть кропотливо подобранных предустановок градиентов для быстрого старта
Копирование CSS-кода	Один клик для копирования готового CSS-кода в буфер обмена
Нет передачи данных	Все работает в вашем браузере — никакого сервера, никакого отслеживания

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

Свойство	Линейный	Радиальный	Конический
Направление	Угол (0–360°)	Форма + ключевое слово размера	Начальный угол
Узор	Прямая линия	Круг или эллипс из центра	Вращательное смещение
Лучше всего подходит для	Фонов, баннеров, кнопок	Световых пятен, шаров, абстрактного искусства	Диаграмм, цветовых колес, часов
CSS-функция	linear-gradient()	radial-gradient()	conic-gradient()

Реальные случаи использования

Фоны сайта

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

Кнопки и призывы к действию

Сделайте кнопки призыва к действию выделяющимися с яркими градиентами. Используйте градиент 180° (сверху вниз) для естественного перехода от света к тени.

Главные разделы

Создайте привлекающие внимание баннеры главного раздела с яркими многоцветными градиентами. Сочетайте три или более цветов для уникального визуального стиля бренда.

Наложения и карточки

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

Визуализация данных

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

Советы для лучших градиентов

• Ограничьтесь 2–3 цветами для чистых, профессиональных дизайнов. Больше остановок могут работать, но требуют тщательной настройки.
• Используйте похожие оттенки для ненавязчивых градиентов (например, светло-голубой к темно-голубому) и дополнительные цвета для ярких градиентов.
• Соответствуйте углу макету — 180° хорошо подходит для вертикальных разделов, 90° для горизонтальных полос.
• Проверяйте в темном и светлом режиме — градиент, выглядящий отлично на белом фоне, может потребовать настройки для темного режима.
• Используйте background-size и background-repeat, чтобы повторять небольшие градиенты в узоры.
• Сочетайте с прозрачностью — используйте значения цветов rgba() для создания градиентов, которые смешиваются с подлежащим контентом.

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

Базовый линейный градиент:

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

Радиальный градиент с формой и размером:

background: radial-gradient(circle farthest-corner, #667eea 0%, #764ba2 100%);

Конический градиент:

background: conic-gradient(from 0deg, #667eea 0%, #764ba2 50%, #667eea 100%);

Все современные браузеры поддерживают эти типы градиентов без префиксов.

Часто задаваемые вопросы

Сколько цветов можно использовать в CSS-градиенте?

CSS поддерживает любое количество цветовых остановок. Этот инструмент позволяет использовать до 8 для практического применения. На реальных проектах чаще всего используются 2–4 остановки.

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

Линейные градиенты переходят между цветами вдоль прямой линии при заданном угле. Радиальные градиенты переходят между цветами от центральной точки в круговом или эллиптическом формате.

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

Да. Все современные браузеры (Chrome, Firefox, Safari, Edge) полностью поддерживают linear-gradient, radial-gradient и conic-gradient без префиксов.

Можно ли анимировать CSS-градиенты?

CSS не может напрямую анимировать значения градиентов с помощью переходов. Однако вы можете анимировать позицию градиента с помощью background-position или использовать CSS @property для анимации пользовательских свойств в поддерживающих браузерах.

Как сделать градиент прозрачным?

Используйте цветовые значения rgba() или hsla() с каналом прозрачности. Например, rgba(102, 126, 234, 0.5) даст полупрозрачную версию цвета.

Сохраняет ли этот инструмент мои данные градиентов?

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