Бесплатный онлайн-инструмент
Генератор CSS градиентов
Собирайте градиент на цветовой полосе — добавляйте точки, тяните, перекрашивайте. Линейный, радиальный или конический, готовый CSS-код в один клик.
Как пользоваться
- Добавьте цвета — кликните по свободному месту цветовой полосы, чтобы поставить новую точку. Перетаскивайте точки мышью, кликом выбирайте и меняйте цвет через палитру.
- Выберите тип — линейный для фонов и кнопок, радиальный для бликов и подсветки, конический для «диаграммных» и лучевых эффектов.
- Задайте направление — для линейного крутите угол или жмите стрелку направления, для радиального и конического выбирайте форму и центр.
- Пробуйте варианты — «Случайный» подберёт неожиданное сочетание, «Развернуть» меняет порядок цветов, а галерея пресетов даёт готовые заготовки одним кликом.
Советы по градиентам
- Близкие оттенки — переход между соседними цветами круга (синий → фиолетовый) выглядит естественнее, чем между противоположными.
- Угол 135° — диагональ «сверху-слева вниз-вправо» воспринимается динамичнее горизонтальных переходов.
- Текст поверх градиента — проверьте контраст на обоих концах перехода, а не только в центре.
- Производительность — CSS-градиент легче картинки-подложки: ноль запросов и идеальная чёткость на любых экранах.
Подобрать и перевести цвета поможет конвертер HEX в RGB.
Частые вопросы
Чем линейный градиент отличается от радиального и конического?
Линейный (linear-gradient) заливает элемент переходом цвета вдоль прямой под заданным углом. Радиальный (radial-gradient) расходится от центра к краям окружностью или эллипсом. Конический (conic-gradient) вращает цвета вокруг центра, как сектора диаграммы. Для фонов страниц и кнопок чаще берут линейный, для «диаграмм» и бликов — конический.
Как добавить больше двух цветов?
Кликните по свободному месту на цветовой полосе — появится новая точка (color stop) с промежуточным цветом. Точек может быть сколько угодно. Перетаскивайте их мышью, чтобы менять позицию, кликайте, чтобы выбрать и перекрасить, а «Удалить» убирает лишнюю. Минимум — две точки.
Что означают проценты у цветов?
Позиция цветовой точки — где цвет проявляется полностью. У градиента «#ff6b35 0%, #7048e8 100%» первый цвет чистый в начале, второй — в конце, между ними плавный переход. Сдвигая точки ближе друг к другу, вы делаете переход резче, вплоть до чёткой границы.
Поддерживают ли градиенты все браузеры?
Да, linear-gradient и radial-gradient без префиксов работают во всех современных браузерах, conic-gradient — с 2020 года (Chrome 69+, Firefox 83+, Safari 12.1+). Вендорные префиксы -webkit- нужны только для очень старых версий.
Можно ли сделать градиентный текст?
Да: задайте градиент как background текста и добавьте background-clip: text с прозрачным цветом. Код: background: linear-gradient(…); -webkit-background-clip: text; color: transparent.