CodeKitHubЧто это за инструмент?
Градиенты CSS — это изображения, которые браузер генерирует из списка цветов, а не файлы, которые вы загружаете: linear-gradient() переходит между цветами вдоль прямой линии под заданным углом, а radial-gradient() расходится цветами наружу от центральной точки. Оба принимают две и более цветовые точки, каждая из которых может быть закреплена на определённой позиции градиента.
При ручном написании градиенты легко испортить незаметной ошибкой: порядок точек, отсутствующие проценты или значение угла в неверном направлении (углы CSS идут по часовой стрелке от 'to top', в отличие от математических углов). Этот инструмент убирает синтаксис с дороги — задавайте цвета и позиции пикерами и ползунками, наблюдайте, как окно предпросмотра обновляется в реальном времени, и копируйте итоговый CSS, когда результат устроит.
Источник: CSS Images Module Level 3, W3C — спецификация, определяющая синтаксис linear-gradient() и radial-gradient().
Зачем его использовать?
- Живой предпросмотр обновляется мгновенно при каждом изменении цвета, позиции и угла — не нужно перезагружать страницу, чтобы увидеть результат.
- Переключайтесь между линейным и радиальным градиентом одним кликом; управление углом автоматически скрывается для радиального градиента, где оно неприменимо.
- Добавляйте и удаляйте цветовые точки (от 2 до 4), а не ограничивайтесь фиксированным двухцветным градиентом.
- У каждой точки свой ползунок позиции, поэтому точки не обязаны располагаться равномерно.
- Выдаёт готовый к вставке CSS в стандартном синтаксисе linear-gradient()/radial-gradient().
- Работает полностью в вашем браузере — ничего из настроенного никуда не загружается. Бесплатно, без регистрации, работает на мобильных.
Как использовать
- Выберите тип градиента — линейный или радиальный.
- Для линейного градиента перетащите ползунок угла — 90deg идёт слева направо, 180deg сверху вниз и так далее.
- Задайте цвет и позицию для каждой точки; первая точка — начальный цвет градиента, последняя — конечный.
- Нажмите «+ Добавить точку», чтобы добавить до 4 точек для многоцветного градиента, или кнопку ✕, чтобы удалить одну (минимум 2).
- Скопируйте сгенерированный CSS и вставьте его в объявление background или background-image.
Пример
Ввод
Linear · Angle: 90deg · Stops: #f97316 at 0%, #ec4899 at 100%Результат
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);Градиент слева направо от оранжевого к розовому — распространённый стиль для кнопок, баннеров и hero-фонов.
Линейный градиент против радиального
Линейный градиент переходит цветом вдоль прямой линии, управляемой углом — подходит для баннеров, кнопок и направленных фонов. Радиальный градиент расходится цветом наружу от центральной точки расширяющимися кольцами, что подходит для эффекта прожектора, значков или свечения. Этот инструмент по умолчанию использует для радиального градиента форму круга, центрированного в блоке, что покрывает самый частый случай использования; CSS также поддерживает форму эллипса и смещённый центр, если вам нужно доработать результат вручную.
Распространённые шаблоны градиентов
- Лёгкий фирменный акцент: два близких оттенка (например, два тона одного цвета) под небольшим углом для мягкой фоновой заливки.
- Контрастная кнопка призыва к действию: два насыщенных дополняющих цвета под углом 90deg или 135deg для смелого, кликабельного вида.
- Наложение на изображение: градиент от прозрачного к сплошному цвету (задайте прозрачность через rgba-цвет в hex пикера или подправьте после копирования), наложенный поверх background-image.
- Многоточечный радужный/фирменный градиент: 3–4 точки, распределённые по всему диапазону 0–100%, для более плавных переходов, чем позволяет двухцветный градиент.
- Радиальный прожектор: яркая центральная точка около 0%, угасающая к более тёмному краю около 100%, полезно для hero-секций или подсветки карточек.
Сочетание с другими CSS-инструментами
Градиенты часто сочетают со скруглёнными углами и тенями на одном элементе — карточка с градиентом, мягкой тенью и скруглёнными углами — распространённый паттерн интерфейса. Сгенерируйте каждую часть отдельно и объедините CSS-объявления на элементе.
→ Генератор box-shadow · Генератор border-radius · Пикер цвета
Часто задаваемые вопросы
В чём разница между linear-gradient() и radial-gradient()?
linear-gradient() переходит цветами вдоль прямой линии под заданным углом. radial-gradient() расходится цветами наружу от центральной точки расширяющимися формами (круг или эллипс). Оба принимают один и тот же список цветовых точек через запятую — различается только форма перехода.
Как работают углы градиента в CSS?
Углы градиента CSS идут по часовой стрелке, начиная от 'to top' (0deg указывает вверх). 90deg указывает вправо, 180deg — вниз, 270deg — влево — противоположность обычным математическим углам, что часто путает при ручном написании градиентов.
Можно ли использовать больше 4 цветовых точек?
Да — градиенты CSS принимают любое количество цветовых точек через запятую. Этот инструмент ограничивает интерактивный конструктор четырьмя точками ради удобного интерфейса, но вы можете скопировать сгенерированный CSS и вручную добавить ещё записи 'цвет позиция%' через запятую в таблице стилей.
Почему мой градиент выглядит полосато, а не гладко?
Полосатость обычно возникает из-за цветов, слишком далёких по оттенку, при слишком малом числе точек между ними, или из-за собственной ограниченной точности цвета браузера при очень низком контрасте. Добавление промежуточной точки со смешанным цветом или выбор более близких по оттенку цветов обычно даёт более гладкий результат.
Можно ли анимировать градиент CSS?
Не напрямую — градиенты не анимируются нативно так, как background-position или transform, поскольку браузеры не умеют интерполировать между двумя произвольными определениями градиента. Распространённые обходные пути — анимировать background-position на увеличенном градиенте или переходить background-color, если меняется только один цвет.