/tool/gradient-generator/ работает считает браузер
Остановки ставятся щелчком по полосе и двигаются мышью или стрелками, у каждой свой цвет и своя прозрачность. Чужой градиент разбирается из вставленной строки, слоёв может быть несколько, а серая середина между насыщенными цветами чинится переходом в OKLCH — с запасным вариантом для старых браузеров. Забрать можно строкой CSS, переменной, миксином SCSS, классом Tailwind, разметкой SVG или картинкой PNG. Слева настройки, справа сам градиент и готовый код: они держатся на экране, пока настройки прокручиваются, а ниже панели — примерка на текст и галерея из 56 наборов. Всё считает браузер, ничего не отправляется на сервер.
Слева редактор: полоса остановок, тип перехода, слои и формат выдачи. Справа — сам градиент и готовый код, они держатся на экране, пока настройки прокручиваются. Ниже панели — примерка на текст и галерея готовых наборов.
Полоса остановок
Полоса — это и есть градиент. Щелчок по ней ставит остановку в этом месте, метку можно тянуть мышью, двигать стрелками на 0,5 %, с Shift — на 5 %, и убирать двойным щелчком или клавишей Delete. Ползунки ниже правят ту остановку, которая выбрана.
Слои
Слоёв может быть несколько: они уйдут в одну строку background-image через запятую. У каждого свои размер, положение и повтор — из этого и собираются полоски, клетка и сетчатые фоны.
Градиент и готовый код
—Градиент почти всегда оказывается под текстом, и там же выясняется, что заголовок на нём не читается. Контраст считается к самой светлой и к самой тёмной точке: работает только та пара, которая проходит обе.
—
Пятьдесят шесть наборов: щелчок открывает их в редакторе целиком — с типом, углом, слоями и прозрачностью, и панель наверху сразу показывает новый градиент вместе с кодом. Свои складываются рядом и остаются в этом браузере.
Сохранённые
Считает браузер. Цвета и настройки никуда не отправляются: после загрузки страница не делает ни одного запроса. Сохранённые градиенты лежат в памяти этого браузера, на сервер они тоже не уходят.
Щёлкните по полосе остановок там, где нужна новая точка. Метку потом можно тянуть мышью, а с клавиатуры — стрелками: шаг 0,5 %, с Shift 5 %, Delete убирает. Что при этом выходит, видно в панели справа: она держится на экране, пока вы прокручиваете настройки.
Цвет выбранной остановки правится в поле рядом: туда можно вставить #RRGGBB, восьмизначный #RRGGBBAA, rgb(), rgba(), hsl(), hwb(), oklch(), lab() или английское имя цвета. Ползунок непрозрачности задаёт альфу отдельно — где слой прозрачен, видно по шахматке: она просвечивает и в полосе остановок, и в превью.
Если между двумя насыщенными цветами провалилась серая полоса, нажмите «Убрать серую середину»: переход уйдёт в OKLCH, а строкой выше останется тот же переход, разложенный в sRGB для браузеров постарше.
Чужой градиент не надо разбирать руками: вставьте строку из чужого CSS в поле «Вставить чужой градиент» — вместе с background-image, точкой с запятой и несколькими слоями — и нажмите «Разобрать».
Слоёв может быть до пяти. У каждого свои background-size, background-position и background-repeat: слой с размером 40 × 40 px и повтором плиткой превращает линейный градиент в полоски, а два таких слоя — в клетку.
Ниже панели, в разделе «Как это выглядит с текстом», проверьте вид «Полоса-шапка» и цвет текста: контраст считается к самой светлой и к самой тёмной точке градиента, и годной парой считается только та, что проходит обе.
В галерее под панелью пятьдесят шесть готовых наборов, каждый открывается в редакторе целиком. Своё сохраняется кнопкой рядом и остаётся в этом браузере.
Забрать можно шестью способами: правило CSS, одна строка, CSS-переменная, миксин SCSS, класс Tailwind, разметка SVG. Вид выбирается в настройках, а готовый код лежит тут же, в панели справа. Кнопка «Скачать PNG» рисует картинку заданного размера, «Ссылка на градиент» складывает всю сборку в адрес страницы.
linear-gradient([угол] [in пространство [путь hue]], цвет положение, цвет положение, …)
Градиент — это изображение, а не цвет. Он ставится в background-image, а не в background-color, и требует у элемента размера: у пустого блока без высоты рисовать нечего. Запасной вариант устроен на правиле каскада: два одинаковых свойства подряд, второе с «in oklch». Браузер, который эту запись не понимает, отбрасывает её целиком и остаётся на первой строке; который понимает — переписывает её второй.
Исходные данные — те же, что стоят в полях по умолчанию: их можно пересчитать в уме и убедиться, что инструмент не врёт.
В sRGB браузер смешивает цвета покомпонентно, прямо по числам записи: в середине выходит ((27+232)/2, (90+114)/2, (215+12)/2) = (130, 102, 114), то есть #826672.
Посмотрим на все три цвета в OKLCH, где насыщенность — это отдельное число. Синий: oklch(50,9 % 0,202 262). Оранжевый: oklch(67,9 % 0,173 51). Середина #826672: oklch(54,2 % 0,040 351). Насыщенность просела с 0,2 до 0,04 — впятеро. Это и есть серая полоса.
Так выходит потому, что синий и оранжевый лежат почти напротив друг друга на круге тонов, а прямая между ними в кубе sRGB проходит близко к серой оси — там, где все три канала примерно равны.
Переход «in oklch» ведёт середину не по прямой в кубе, а по дуге между тонами: от 262° к 51° кратчайший путь идёт через 300° и 340°, а насыщенность по дороге не падает. Середина получается #C047A7 — oklch(59,5 % 0,189 337), малиновая и живая.
Кнопка «Убрать серую середину» делает ровно это переключение и оставляет короткий путь по кругу тонов. Запасная строка раскладывает тот же переход на десять промежуточных остановок в sRGB: браузер без поддержки увидит почти то же самое, просто перечисленное явно.
Насыщенность в середине перехода поднялась с 0,04 до 0,189 — в четыре с половиной раза. В выдаче две строки: сначала запасная «linear-gradient(90deg, #1b5ad7 0%, … #c047a7 50%, … #e8720c 100%)», следом настоящая «linear-gradient(90deg in oklch, #1b5ad7 0%, #e8720c 100%)». Браузер возьмёт ту, которую понимает.
Чаще всего у блока нет высоты. Градиент — фоновое изображение, оно рисуется по размеру блока, а пустой div высоты не имеет. Вторая причина — запись в background-color: там градиент не работает вовсе, нужен background-image или сокращение background.
Браузер смешивает цвета в sRGB, и переход между насыщенными противоположными тонами проходит через тусклую середину. Нажмите «Убрать серую середину» — инструмент переключит смешивание на OKLCH и допишет запасную строку в sRGB для браузеров, которые такой синтаксис не понимают. Вручную можно то же самое: выбрать OKLCH в группе «В каком пространстве смешивать».
Ничего: галочка «дописывать запасной вариант» стоит по умолчанию. В выдаче будет два одинаковых свойства подряд — сначала переход, разложенный на промежуточные остановки в sRGB, потом настоящий с «in oklch». Браузер без поддержки отбросит вторую строку и останется на первой, разница на глаз будет в пределах полосы дизеринга. Поддержка «in oklch» есть в Chrome и Edge со 111-й версии, в Safari с 16.2 и в Firefox со 128-й.
Кнопкой «Раздвоить: резкая граница» — она ставит рядом вторую остановку с тем же положением, и переход между ними схлопывается в линию. Дальше второй остановке можно задать другой цвет. Полосу нужной ширины набирают так же, парами остановок.
Возьмите в галерее набор «Узоры» и посмотрите, как он устроен. Смысл такой: у слоя задан background-size, скажем 40 × 40 px, и повтор плиткой — тогда градиент рисуется не на весь блок, а в каждой клетке 40 × 40 отдельно. Два таких слоя с прозрачностью, повёрнутые друг относительно друга, дают клетку.
Ради оверлеев. Тёмная плашка от чёрного с альфой 0,7 к прозрачному поверх фотографии — самый частый градиент в вебе: она гасит низ снимка, чтобы на нём читался заголовок, и не трогает верх. Такой градиент кладут вторым фоном над картинкой. Под превью и под полосой остановок здесь нарисована шахматка — по ней и видно, где слой прозрачен.
Из-за записи «transparent». По спецификации это rgba(0, 0, 0, 0) — прозрачный чёрный, и переход от красного к нему идёт через полупрозрачный тёмный. Правильно писать не «transparent», а тот же цвет с нулевой альфой: от rgba(255, 0, 0, 1) к rgba(255, 0, 0, 0). Инструмент так и делает: ползунок непрозрачности меняет только альфу, цвет остаётся прежним.
Радиальный меняет цвет по мере удаления от центра — как круги на воде. Конический меняет цвет по мере обхода вокруг центра — как секторы на круговой диаграмме. Отсюда и применение: радиальный для подсветки, конический для шкал и колеса цветов.
Никуда. Всё считается в браузере, страница после загрузки не делает ни одного сетевого запроса — это видно в панели разработчика. PNG и SVG собираются здесь же, на устройстве. Сохранённые градиенты лежат в localStorage этого браузера. В сеть уходит только то, что вы сами отправите ссылкой: кнопка «Ссылка на градиент» складывает сборку в адрес страницы.
Чтобы превью оставалось на экране. Панель справа липкая: она держится в кадре, пока вы прокручиваете настройки, — но только пока сама ниже окна. Миксин SCSS с запасной строкой или разметка SVG занимают полтора экрана, и без ограничения панель стала бы выше окна, а тогда липкость выключается. Поэтому у листинга своя прокрутка, а превью и кнопки остаются на месте.
Считает clamp() для кегля или отступа между двумя ширинами экрана.
Открыть