🌈

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

Визуально создавайте линейные и радиальные CSS-градиенты. Добавляйте цветовые остановки, настраивайте позиции, задавайте угол и копируйте готовый CSS в один клик.

Инструменты-генераторы Работает локально Данные не отправляются
CSS-градиентлинейный градиентрадиальный градиентцветовые остановки
Тип градиента
Угол
Цветовые остановки
Предпросмотр
Вывод CSS
background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);

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

Генератор градиентов CSS — это визуальный инструмент для создания линейных и радиальных градиентов CSS. Вы добавляете цветовые остановки, задаёте их позиции в шкале 0—00%, выбираете угол для линейных градиентов и видите результат в реальном времени. Итоговое свойство CSS готово для вставки в любую таблицу стилей.

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

  1. Выберите тип градиента: линейный или радиальный.
  2. Для линейных градиентов задайте угол с помощью ползунка.
  3. Отредактируйте стандартные цветовые остановки: щёлкните по полям выбора цвета и настройте позиции.
  4. При необходимости добавьте больше цветовых остановок с помощью кнопки «Добавить цветовую остановку».
  5. Нажмите «Копировать CSS», чтобы скопировать свойство градиента в буфер обмена.

Похожие инструменты

🎨
Палитра из фото
Извлеките компактную палитру преобладающих цветов HEX из изображения
 ☀️
Яркость контраст фото
Настройте яркость и контраст фото с мгновенным предпросмотром
 🌓
Дуотон фото
Сопоставьте тени и светлые участки изображения с двумя пользовательскими цветами
Синтаксис градиентов CSS ▾
Пример
Ввод Линейный, 135°, остановка 1: #7c6af7 на 0%, остановка 2: #06b6d4 на 100%
Результат background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);
Типичные сценарии использования
  • Создавайте фоновые градиенты для лендингов и компонентов интерфейса
  • Создавайте градиентные оверлеи для hero-секций
  • Создавайте паттерны цветовых остановок для графиков и разделителей
  • Прототипируйте идеи градиентов перед переносом в инструмент дизайна
Часто задаваемые вопросы
Какие типы градиентов поддерживаются?

Поддерживаются линейные градиенты с настраиваемым углом (0—60°) и радиальные градиенты (в форме круга).

Можно ли добавить больше двух цветовых остановок?

Да. Нажмите «Добавить цветовую остановку», чтобы добавить столько остановок, сколько нужно. У каждой остановки независимые цвет и позиция.

Как управлять направлением линейного градиента?

Используйте ползунок угла. 0° — сверху вниз, 90° — слева направо, 135° — по диагонали.

Совместим ли результат с разными браузерами?

Yes. The tool outputs standard CSS using the linear-gradient() and radial-gradient() functions which are supported by all modern browsers.