01
Разделяйте угол и центр
В линейном режиме 0 градусов направлены вверх, 90 — вправо. У конического перехода отдельный начальный угол, а у радиального — форма и центр без угла.
Инструменты HTML и CSS
генератор CSS-градиентовс живым предпросмотром
Меняйте цвета и позиции точек: предпросмотр и готовый CSS обновляются вместе.
генератор CSS-градиентов
Цветовые точки
Точка 1
Точка 2
CSS-правило
background-image: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);Цвета и CSS остаются в этой вкладке браузера и не загружаются на сервер.
Параметры градиента
CSS готов к копированию.
Когда у фона больше двух цветов, по одной строке CSS трудно понять, где именно меняется оттенок. Генератор CSS-градиентов показывает переходы и помогает сделать резкую границу, если две точки находятся на одной позиции.
Для шапки сайта, кнопки или круглого декоративного элемента генератор CSS-градиентов сохраняет палитру при переключении между линейным, радиальным и коническим режимами.
Зачем нужен генератор CSS-градиентов
Сравните три формы с одинаковой палитрой и точно расставьте точки.
Одна палитра для трёх форм
Генератор CSS-градиентов сохраняет цвета и проценты при смене типа. Угол, форма и координаты центра появляются только в режимах, где они влияют на результат.
Старый код нельзя скопировать по ошибке
После перемещения точки предпросмотр и CSS обновляются вместе. Неверный HEX делает прежний результат бледным и отключает копирование.
Три настройки, влияющие на вид фона
02
Размещайте точки точно
Перетащите маркер или введите процент. Две точки в одном месте дают чёткую границу вместо плавного смешения.
03
Проверяйте актуальность результата
Автоматическая генерация включена по умолчанию. Выключите её, измените несколько значений и нажмите Ctrl/Cmd+Enter; до обновления копирование недоступно.
Форма, точки и код в одном редакторе
Линейный, радиальный, конический
Сделайте направленный переход, свечение из центра или цветовой круг с теми же точками.
От двух до восьми точек
Задайте каждой точке шестизначный HEX, прозрачность и процент либо перетащите её маркер.
Стандартное CSS-правило
Скопируйте background-image, соответствующий предпросмотру; полупрозрачные цвета записываются через rgba().
Границы редактора и формата
- От двух до восьми точек
- Последние две удалить нельзя. Удаление сначала показывает новый вид, затем требует подтверждения и допускает одну отмену.
- Только шестизначные HEX-цвета
- Введите #RRGGBB и отдельно задайте прозрачность. Ошибочные значения блокируют копирование; преобразования HSL и имён цветов здесь нет.
- Только один слой
- Генератор CSS-градиентов выдаёт одно стандартное правило background-image. Импорт изображений и CSS, многослойный фон, PNG и Tailwind не поддерживаются.
- Контраст текста нужно проверять отдельно
- Яркость фона меняется от точки к точке. Оцените читаемость текста именно в той области, где он будет размещён.
Вопросы про генератор CSS-градиентов
Как сделать градиент в CSS?
Выберите тип и настройте цвета с позициями. Генератор CSS-градиентов сразу покажет фон и подготовит строку background-image для копирования.
Чем отличаются линейный, радиальный и конический градиенты?
Линейный меняется вдоль направления, радиальный идёт от центра наружу, конический вращается вокруг центра. Цвета остаются при переключении.
Как добавить цветовую точку?
Нажмите «Добавить точку»: она появится посередине самого широкого промежутка. Затем измените цвет или процент; максимум — восемь точек.
Как изменить угол градиента?
В линейном режиме задайте 0–360 градусов: 0 указывает вверх, 90 вправо. Для конического режима есть отдельный начальный угол.
Почему градиент выглядит одноцветным?
Проверьте, различаются ли цвета и позиции точек. Совпадающие позиции создают резкую границу, а одинаковые цвета скрывают переход.
Нашли другой пограничный случай?
Попробуйте генератор CSS-градиентов
Вернитесь к точкам, настройте форму и скопируйте CSS после проверки предпросмотра.