LearnJS

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

CSS Gradient Generator

Направление и форма

01

Цветовые точки

Проценты показывают позицию точки на шкале.
3 цвета
02

Предпросмотр

16 : 9
Ваш градиент Фон готов к использованию
Готовый код

CSS для фона

background 
background: linear-gradient(135deg, #0A7D6B 0%, #5BC0BE 48%, #F2C879 100%);

Готовые сочетания

Нажмите, чтобы применить
03
О сервисе

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

Генератор градиентов помогает визуально подобрать переходы цветов и сразу получить корректное значение свойства background.

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

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

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

Что умеет градиент CSS генератор

  • До восьми цветов. Промежуточные точки позволяют собрать мягкий сложный переход или резкую границу.
  • Три типа градиента. Поддерживаются стандартные функции linear-gradient(), radial-gradient() и conic-gradient().
  • Готовые палитры. Сочетание можно выбрать из примеров, развернуть или создать случайно.
  • Экспорт. Результат доступен как CSS-код и как PNG-изображение размером 1600 × 900 пикселей.
  • Локальная работа. Настройки, копирование и скачивание обрабатываются только на вашем устройстве.

Какой тип градиента выбрать

Тип CSS-функция Когда использовать
Линейный linear-gradient() Фон страницы, кнопки, карточки и направленные цветовые переходы.
Радиальный radial-gradient() Мягкое свечение, блик, виньетка или акцент из выбранной точки.
Конический conic-gradient() Цветовой круг, диаграмма, декоративная рамка или круговой индикатор.

Для текста поверх градиента проверяйте контраст по всей площади блока: светлая надпись может хорошо читаться на одном цвете и исчезать на другом.

Частые вопросы

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

Выберите тип градиента, задайте цвета и их позиции, настройте угол или центр. Затем нажмите «Копировать CSS» и вставьте полученное свойство background в стили нужного элемента.

Какие типы CSS-градиентов поддерживает генератор?

Инструмент создаёт линейные, радиальные и конические градиенты: linear-gradient(), radial-gradient() и conic-gradient().

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

Да. Добавьте до восьми цветовых точек и отдельно настройте положение каждой от 0 до 100 процентов.

Что означает угол градиента в CSS?

Угол определяет направление перехода. 0deg идёт снизу вверх, 90deg - слева направо, 180deg - сверху вниз, а 135deg создаёт диагональный переход.

Загружаются ли изображение на сервер?

Нет. Генерация CSS и PNG выполняется локально в браузере. Выбранные цвета никуда не отправляются.