Что такое Генератор градиентов?

Визуальный конструктор CSS-градиентов с поддержкой линейных, радиальных и конических типов с неограниченным числом точек цвета. Настраивайте углы, позиции и цвета в реальном времени и копируйте CSS одним кликом.

Выбирайте между линейным, радиальным и коническим градиентом, задавайте угол от 0° до 360° и добавляйте сколько угодно цветовых точек с отдельной прозрачностью у каждой для прозрачных наложений. Начните с подобранного пресета — Закат, Instagram или Океан — и подправьте цвета. Для радиального градиента доступны форма круга или эллипса и ключевое слово охвата, а смешивание можно переключить на OKLab или OKLCH для более плавной современной интерполяции или задать кривую плавности. Включите «Анимацию», чтобы получить готовый к вставке цикл @keyframes и сделать живой фон. На выходе — чистый CSS, который вы вставляете в таблицу стилей, конфиг Tailwind или дизайн-инструмент.

Как использовать

1. Шаг 1 — Выберите тип градиента (линейный, радиальный или конический) и задайте направление или угол с помощью слайдера или кнопок предустановок.
2. Шаг 2 — Добавляйте точки цвета, кликая по градиентной полосе. Настраивайте цвет и позицию каждой точки перетаскиванием или вводом точных значений.
3. Шаг 3 — Посмотрите живой предпросмотр градиента, затем скопируйте сгенерированный CSS в буфер обмена или скачайте его как CSS-файл.

Когда использовать

• Делать заголовочные баннеры, кнопки и фоны карточек без Photoshop.
• Сохранять единый фирменный набор цветов на сайте, в письмах и слайдах.
• Проверить, как CSS-эффект выглядит, до передачи макета разработчику.

Результат

Допустим, вам нужен фон главного экрана в стиле заката. Выберите линейный градиент 135°, поставьте оранжевый на 0%, розовый на 50% и фиолетовый на 100%, затем скопируйте CSS в таблицу стилей.

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

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

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

Сколько цветовых точек можно добавить?

Жёсткого предела нет. В большинстве проектов хватает двух–четырёх точек. Если их больше пяти-шести, градиент становится грязным: цвета сливаются, а чёткие переходы теряются.

Почему на тёмном фоне видны полосы (бэндинг)?

Полосы появляются, когда у соседних цветов слишком близкая яркость. Увеличьте контраст между точками, переключите смешивание цвета на OKLCH или OKLab (перцептивная интерполяция) либо добавьте лёгкий слой шума в CSS.

Можно ли использовать эти градиенты в Figma или Sketch?

Сам CSS туда не вставить, но значения цветов и проценты позиций переносятся один в один. Скопируйте hex и процент каждой точки в редактор градиентов вашего дизайн-инструмента.

Что именно задаёт параметр угла?

В линейном градиенте 0° направлен вверх, угол растёт по часовой стрелке: 90° — слева направо, 180° — сверху вниз. В коническом угол определяет, с какой точки на окружности начинается разворот цветов.

Похожие инструменты