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 страницы. Не вводите конфиденциальные сведения; инструмент не сохраняет проект градиента для повторного использования.

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

Генератор вымышленных телефонных номеров

Создавайте до 50 вымышленных номеров из официально зарезервированных диапазонов пяти стран.

Генератор конфигурации webpack

Создайте webpack.config.js для webpack 5 под чистый JavaScript, React или Vue: TypeScript, Babel, CSS или Sass, изображения, HtmlWebpackPlugin, dev-сервер и команда npm install.

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

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

Валидатор XSD

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

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

Создавайте 1–20 похожих на адрес записей для макетов и тестов в трёх упрощённых форматах.

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

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

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