Генератор CSS-градиентов

Инструмент проходит по всей длине градиента тремя способами сразу и считает, сколько насыщенности теряется в самой глубокой яме. В замечаниях стоят все три числа и вывод, какой способ подходит именно вашим цветам. Переключатель смешивания есть у пары зарубежных генераторов, но выбирать приходится вслепую: на одной паре цветов помогает одно, на другой — другое.

Когда цвета разведены слишком далеко и ни один способ не спасает, мы говорим и это, а заодно советуем поставить между ними третью точку насыщенного цвета.

Запасной вариант выдаётся сам

В готовом коде две строки background-image: сначала обычный градиент, за ним тот же с указанием пространства. Браузер, который вторую запись не понимает, отбрасывает её и остаётся на первой. Это обычное правило каскада, и @supports здесь не нужен. Понимает ли ваш браузер такую запись, инструмент проверяет прямо на месте и говорит об этом, а не приводит номера версий по памяти.

Текст поверх градиента

Фон с переходом коварен тем, что текст на нём читается не везде одинаково: у одного края контраста хватает, у другого нет. Мы берём самую трудную точку всего градиента и считаем контраст с чёрным и белым по WCAG 2.1. В ответе стоит, какой цвет текста держится лучше, каков запас и где то самое трудное место.

Полосы на больших плоскостях

На весь экран ровный градиент часто идёт видимыми ступенями: на канал приходится 256 значений, и соседние оттенки складываются в заметные полосы. Помогает едва различимый шум поверх заливки — он разбивает границы ступеней. Включается галочкой, в код добавляется одним слоем.

Три вида и точки перехода

Линейный с углом и быстрыми направлениями, радиальный с формой, размером и центром, конический с началом отсчёта. Точек до десяти, они тянутся мышью прямо по полосе. Новая точка встаёт в самый широкий промежуток и берёт цвет оттуда, поэтому уже собранный переход не ломается. Готовое забирается в CSS, SCSS или строкой для Tailwind.

Что дальше

Цвета для градиента удобно снять палитрой из изображения, перевести один цвет между HEX, RGB и HSL поможет код цвета HTML, а разложить готовый CSS по вложенности — конвертер CSS и SCSS.