ПаветтаГенератор CSS-градиентов
Собирает свойство background с градиентом и сразу показывает результат на большом полотне. Три типа: линейный с углом, радиальный с формой и конический с поворотом.
Предпросмотр
Настройки
Цветовые точки
Готовый CSS
Разобрать чужой градиент
Три типа и пространство интерполяции
Генератор собирает CSS-градиент: линейный, радиальный или конический. Точки перехода расставляются мышью, направление задаётся углом, а готовое правило копируется в буфер одной кнопкой.
Между двумя цветами браузер интерполирует по умолчанию в пространстве sRGB, и на некоторых парах это даёт грязную серую середину. Особенно заметно на переходе от синего к жёлтому: посередине появляется мутный оттенок, которого не ожидаешь.
Решение — задать пространство интерполяции явно. Современный синтаксис позволяет указать oklab или oklch, и переход становится ровным по светлоте, без провала в середине.
Отдельная возможность — резкие переходы. Если две точки поставить в одну позицию, градиент превратится в полосы, и этим приёмом делают фоны в линию, диагональную штриховку и шкалы.
| Тип | Как строится |
|---|---|
| Линейный | Вдоль заданного угла |
| Радиальный | От точки наружу |
| Конический | По кругу вокруг точки |
| Повторяющийся | Циклом до края блока |
От картинки в один пиксель до oklch
Первые градиенты в вебе рисовали картинкой: узкая полоска в один пиксель шириной растягивалась фоном по горизонтали. Приём был массовым в двухтысячные и жил до появления поддержки градиентов в самом CSS.
Свойство появилось в браузерах в 2008 году с разными несовместимыми записями у разных движков, из-за чего верстальщики годами писали по четыре варианта одного правила. Единый синтаксис закрепился к 2011 году.
Конический градиент добавили заметно позже, в 2018-м. Он оказался неожиданно полезен для круговых диаграмм и индикаторов прогресса: раньше их приходилось рисовать вручную в векторе или собирать из наложенных элементов.
Отдельная область применения — маски и обрезка. Градиент от непрозрачного к прозрачному служит мягкой границей у длинного блока текста и заменяет картинку с растушёвкой, которую раньше приходилось готовить в графическом редакторе под каждый фон.
Возможность задавать пространство интерполяции появилась в спецификации четвёртого уровня. До неё ровный переход между дальними цветами приходилось собирать вручную, расставляя промежуточные точки на глаз.
Как собрать и где проверить
Соберите переход мышью и скопируйте правило. Для фонов держите два-три цвета: набор из шести точек выглядит пёстро и отвлекает от содержимого.
Для перехода между далёкими по тону цветами задавайте пространство oklch явно. Разница между обычным и таким градиентом на паре синий-жёлтый видна сразу.
Для кнопок и мелких элементов берите переход внутри одного тона. Градиент из двух разных цветов на кнопке в сорок пикселей высотой читается как дефект отрисовки.
Проверяйте градиент на тексте поверх. Контраст меняется по длине блока, и надпись, читаемая слева, у правого края может провалиться — проверять надо обе стороны.
Проверьте градиент в тёмной теме отдельно. Пара цветов, красиво лежащая на белом фоне, на тёмном обычно теряет контраст, и переход превращается в мутное пятно.
Для больших блоков помните о полосатости. Плавный переход на широком фоне в восьмибитном цвете распадается на видимые ступени; лечится добавлением едва заметного шума поверх.
Для повторяющихся градиентов задавайте размер фона явно. Без этого узор растягивается под блок, и полосы на широком экране выходят вчетверо толще, чем задумано, — на мобильном при этом всё выглядит правильно.
Подобрать цвета для перехода поможет генератор оттенков, а взять случайную пару — генератор цветов.
| Типы | линейный, радиальный, конический |
| Интерполяция по умолчанию | sRGB |
| Ровный переход | oklab или oklch |
| Резкие полосы | две точки в одной позиции |
| Градиенты в браузерах | с 2008 |
| Единый синтаксис | 2011 |
| Конический | 2018 |
| Полосатость | лечится шумом |
Цветовых точек сколько угодно — каждую можно двигать по шкале, менять цвет и прозрачность.
Как пользоваться
Готовый код лежит под предпросмотром и копируется одной кнопкой. Обратный ход тоже работает: вставьте чужой градиент из чужого сайта, и он разберётся на точки, которые дальше можно править.
- Линейный подходит для фонов и кнопок, радиальный — для подсветки, конический — для диаграмм и колец.
- Точку добавляют кнопкой, двигают ползунком позиции, удаляют крестиком. Минимум две.
- Угол для линейного, форму и центр для радиального, стартовый поворот для конического.
- Готовое свойство background под предпросмотром. Рядом кнопка копирования.
Частые вопросы
Чем градиент отличается от картинки
Градиент — это функция, которую браузер рисует сам, поэтому он ничего не весит, масштабируется без потери качества и перерисовывается под любой размер блока. Картинка того же вида займёт десятки килобайт и станет мыльной на ретине. Для плавных переходов между цветами картинка не нужна почти никогда.
Как задаётся угол в линейном градиенте
В CSS ноль градусов — это снизу вверх, и дальше по часовой стрелке: 90deg — слева направо, 180deg — сверху вниз. Это отличается от привычной математической записи, где ноль смотрит вправо. Вместо угла можно писать словами: to right, to bottom left.
Почему в градиенте появляется серая полоса
Так проявляется интерполяция через прозрачность. Запись transparent означает rgba(0,0,0,0) — то есть чёрный с нулевой непрозрачностью, и на переходе к цветной точке браузер идёт через полупрозрачный чёрный. Лечится заменой transparent на тот же цвет с нулевой альфой: вместо to transparent пишите to rgba(255,255,255,0).
Что такое цветовые остановки без позиции
Если позиции не указаны, браузер расставляет точки равномерно: две по краям, три — по краям и в середине. Позиция нужна, когда переход должен быть резким или смещённым. Две точки с одинаковой позицией дают чёткую границу без перехода — так рисуют полосы.
Работает ли конический градиент везде
conic-gradient поддерживается всеми актуальными браузерами с 2020 года. В старых версиях он просто не отрисуется, поэтому под ним стоит оставить обычный фоновый цвет запасным свойством — браузер, который не понял конический, возьмёт предыдущее объявление.
Можно ли наложить несколько градиентов
Да, свойство background принимает список через запятую: первый в списке лежит сверху. Чтобы нижние были видны, у верхних должны быть полупрозрачные участки. Этот приём даёт сетки, полоски и текстуры без единой картинки.
Спросите нейросети об инструменте
Больше возможностей: Нейросеть для кода, написать, найти ошибку, объяснить.
Похожие инструменты
Шкала от 50 до 950 по одному цвету: осветление, затемнение и приглушение. Контраст каждой ступени и выгрузка в CSS, SCSS и Tailwind.
ОткрытьГенератор случайных цветовСлучайный цвет или палитра из пяти с фиксацией удачных. Диапазоны тона, насыщенности и светлоты, пресеты пастели и тёмных.
ОткрытьГенератор FlexboxВизуальный конструктор flex-раскладки: направление, перенос, выравнивание по обеим осям. Отдельно настраиваются grow, shrink, basis и order каждого элемента.
ОткрытьГенератор CSS transformСдвиг, поворот, масштаб и наклон, включая трёхмерные повороты с перспективой. С точкой отсчёта и разбором чужого значения.
ОткрытьКалькулятор CSS clamp()Адаптивный размер по двум точкам без медиазапросов. С графиком роста и проверкой требования доступности о масштабировании.
ОткрытьГенератор text-shadowТень текста со слоями и готовыми эффектами: обводка, неон, объём, гравировка. Предпросмотр на своём фоне и шрифте.
ОткрытьЕщё генераторы
Пароли и тестовые данные, CSS-градиенты, тени и скругления, clip-path и фильтры, анимации, Flexbox и Grid — в разделе 39 генераторов.