Softonic

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

Шаг 1 / 3
Тип
Далее

В современных интерфейсах фоновые элементы редко используют однотонные цвета: разделы с главными элементами, кнопки и карточки практически всегда применяют градиенты в CSS. Этот генератор позволяет выбрать линейный или радиальный градиент, задать количество цветовых точек по желанию, установить угол (для линейных градиентов) или форму (для радиальных), а также скопировать чистое значение background: linear-gradient(…), готовое к вставке в вашу таблицу стилей.

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

  1. 1

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

    Линейный (направление задаётся углом) или радиальный (круг/эллипс).

  2. 2

    Установите угол или форму

    Линейный: 0–360°. Радиальный: круг или эллипс.

  3. 3

    Добавьте цветовые точки

    Каждая точка представляет собой цвет в сочетании с позицией (от 0 до 100 %). Градиенты из двух точек служат базовым стандартом; использование трёх и более точек обеспечивает более плавные переходы.

  4. 4

    Скопируйте CSS

    Результатом является единственное значение свойства `background`, которое можно вставить в любой файл CSS.

Шпаргалка по синтаксису

/* Линейный */
background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);

/* Радиальный (круг) */
background: radial-gradient(circle at center, #6366F1 0%, #EC4899 100%);

/* С несколькими точками */
background: linear-gradient(90deg, #fff 0%, #f59e0b 50%, #ef4444 100%);

Углы, которые действительно соответствуют интуиции

Углы градиента CSS отличаются от углов в тригонометрии: 0deg направлен вверх (на север), 90deg, вправо (на восток), 180deg, вниз, 270deg, влево.

Направление Угол
Сверху вниз 180deg
Снизу вверх 0deg
Слева направо 90deg
Из верхнего левого угла в нижний правый 135deg

Как избежать грязных промежуточных тонов

Линейные градиенты между дополнительными цветами (например, синий → оранжевый) проходят примерно на уровне 50 % через серую полосу, где смесь выглядит «безжизненной». Исправить это можно так:

  • Добавьте промежуточную точку в родственном оттенке (синий → фиолетовый → оранжевый).
  • Используйте интерполяцию OKLCH (linear-gradient(in oklch, ...)) для перцептивно более плавных переходов, поддерживается во всех современных браузерах с 2024 года.
  • Слегка сместите оттенок одного из концов, чтобы промежуточный тон попадал в более тёплую гамму.

Совет по производительности

Градиенты отрисовываются графическим процессором и обычно обходятся дёшево. Однако анимация градиента (трюки с background-position, размытие SVG) всё же может увеличить стоимость отрисовки, протестируйте на телефоне среднего класса перед выпуском.

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

В CSS градиенты измеряют угол по часовой стрелке от верхней точки, тогда как стандартная математика измеряет его против часовой стрелки от правой стороны. В CSS значение 90deg указывает вправо; в тригонометрии это соответствовало бы 0°.

В спецификации допускается любое количество точек. На практике более четырёх–пяти точек обычно создаёт эффект радуги; две или три тщательно выбранные точки почти всегда выглядят более чисто и аккуратно.

Да, вставьте значение произвольного типа: class="bg-[linear-gradient(135deg,#6366F1,#EC4899)]". Для многократно используемых градиентов определите пользовательский утилитарный модуль в конфигурации Tailwind.

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

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Конвертер размера файлов

Преобразуйте значения между байтами, КБ, МБ, ГБ, ТБ и двоичными единицами IEC (KiB, MiB, GiB, TiB), свободно сочетая десятичные и двоичные единицы.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Конвертер CMYK в RGB

Преобразуйте проценты CMYK в приблизительные значения RGB и Hex для быстрого экранного предпросмотра по стандартной формуле.

Инструмент доступен на других языках