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

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

CSS-градиент — плавный переход между двумя и более цветами, рисуемый браузером вдоль линии, луча или вокруг угла. При грамотном использовании один градиент может заменить фоновую картинку на 200 килобайт: он масштабируется до любого размера, остаётся резким на любом экране и укладывается в одну строку CSS. Трудность не в синтаксисе, а в том, чтобы видеть результат, пока вы настраиваете цвета, угол и точки.

Эта страница — живая рабочая среда для этого. Вы перетаскиваете точки, двигаете угол, переключаетесь между пятью видами градиентов, и страница выдаёт ту самую декларацию linear-gradient(...) (или radial-, conic-, повторяющийся), какая нужна вашей таблице стилей, — плюс готовый к вставке фрагмент Tailwind v4 @theme, превращающий каждый цвет в переиспользуемый токен.

Как пользоваться#

1. Выберите Тип градиента:
   • Линейный — переход вдоль прямой под выбранным углом. Значение по умолчанию; покрывает большинство случаев.
   • Радиальный — цвета исходят наружу из центральной точки. Хорошо для прожекторов и виньеток.
   • Конический — цвета обходят вокруг центра, как круговая диаграмма. Полезно для цветовых кругов и фонов спиннеров.
   • Линейный повторяющийся / Радиальный повторяющийся — тот же градиент, уложенный плиткой, даёт полосы или концентрические кольца.
2. Для линейного и конического типов перетащите ползунок Угол (0–359°). Превью обновляется в реальном времени; 0° указывает вверх, 90° — вправо, 135° — классическая диагональ из верхнего левого в нижний правый угол.
3. Для радиальных типов выберите Форму — Круг или Эллипс (по умолчанию для адаптивных фонов на весь экран).
4. Управляйте цветовыми точками:
   • У каждой точки есть образец цвета и позиция на градиентной полосе (0–100 %).
   • Перетаскивайте рукоятки по полосе, чтобы сдвинуть точку, либо введите точную позицию.
   • Нажмите Добавить точку, чтобы вставить новую; нажмите × на точке, чтобы удалить её.
   • Градиенту нужно минимум две точки.
5. Читайте два вывода внизу: CSS (сырое значение градиента) и Tailwind v4 (блок @theme, регистрирующий каждый цвет как токен --color-grad-*, плюс утилита .bg-gradient, которая их использует). Используйте кнопку копирования рядом с каждым.

Ключевые возможности#

• Пять видов градиента в одном инструменте. Линейный, радиальный, конический и оба повторяющихся варианта — переключение без повторного ввода цветов.
• Живой, пиксельно-точный превью. Большой блок справа — это реальный градиент, который вы получите; что видите, то и попадёт в таблицу стилей.
• Полоса точек с перетаскиваемыми рукоятками. Сдвиньте любую цветовую точку перетаскиванием; процент обновляется при движении.
• Двойной вывод. Сырой CSS для написанных вручную таблиц стилей и фрагмент Tailwind v4 @theme (каждая точка становится токеном --color-grad-*, потребляемым утилитой .bg-gradient) для проектов на utility-first — оба всегда синхронны.
• Отображение угла. Точный градус показан рядом с ползунком, поэтому градиент можно воспроизвести где угодно.
• Ноль загрузок. Цвета, точки и угол никогда не покидают браузер.

Разбор примера#

Допустим, нужен спокойный, слегка диагональный фирменный градиент от индиго к тилу. Выберите Линейный, задайте угол 135° и используйте две точки:

• Точка 1: #4F46E5 на 0% (индиго)
• Точка 2: #0D9488 на 100% (тил)

Вывод CSS:

linear-gradient(135deg, #4F46E5 0%, #0D9488 100%)

а фрагмент Tailwind v4:

@theme {
  --color-grad-1: #4F46E5;
  --color-grad-2: #0D9488;
}

.bg-gradient {
  background-image: linear-gradient(135deg, var(--color-grad-1) 0%, var(--color-grad-2) 100%);
}

Вместо того чтобы встраивать hex-значения, вывод Tailwind регистрирует каждую точку как дизайн-токен --color-grad-* внутри @theme, а затем наводит на них единственную утилиту .bg-gradient через var(...). Измените одну переменную — и каждое место, где она потребляется, обновится разом. Нужен третий, более мягкий цвет в середине? Нажмите Добавить точку, задайте #7C3AED на 50%, и фрагмент обрастёт токеном --color-grad-2: #7C3AED, а тил сместится вниз до --color-grad-3 — точки всегда перенумеровываются по позиции, поэтому имена никогда не рассинхронизируются с полосой.

FAQ#

В чём разница между линейным, радиальным и коническим градиентами?#

Линейный переходит вдоль прямой, заданной углом. Радиальный переходит наружу из точки, образуя круг или эллипс цвета. Конический переходит вокруг точки — представьте вращающееся цветовое колесо, где каждый угол — свой оттенок. Повторяющиеся варианты каждого укладывают паттерн плиткой, создавая полосы или кольца.

Почему вывод Tailwind определяет переменные --color-grad-* вместо встраивания цветов?#

Tailwind v4 перенёс конфигурацию в CSS через блок @theme, где каждая запись становится переиспользуемым дизайн-токеном. Выдавая каждую точку как --color-grad-1, --color-grad-2, … и ссылаясь на них в .bg-gradient через var(...), фрагмент вручает вам палитру, переиспользуемую где угодно — рамки, текст, тени — а не только в этом фоне. Отредактируйте одну переменную, и все потребители обновятся разом. (В Tailwind v3 нет @theme; вставьте вывод CSS в свою таблицу стилей.)

Можно сделать резкий цветовой ступенчатый переход, а не плавный?#

Да. Дайте двум точкам одинаковую позицию — например #000 50% и #fff 50%. Без расстояния между ними переход имеет нулевую ширину, поэтому смена становится резкой линией. Так строят полосатые или ленточные фоны без изображения.

Конический градиент кажется повёрнутым относительно моего дизайнерского инструмента. Почему?#

Разные инструменты измеряют начальный угол конического градиента по-разному. CSS измеряет угол from по часовой стрелке от верха (12 часов). Если ваш дизайнерский инструмент считает от правого края (3 часа) или против часовой стрелки, вычтите или прибавьте 90° (или инвертируйте знак), пока превью не совпадёт.