Сгенерировать CSS градиент

Как скопировать CSS

1. 1

   Выберите цвета и позиции точек

   Начните с двух точек и добавьте до восьми. У каждой точки есть ввод цвета и позиции в процентах, так что вы задаете точные значения, а не двигаете ползунок мышкой на глаз.

2. 2

   Выберите линейный, радиальный или конический

   Задайте угол для линейного или конического градиента, форму и центр для радиального и укажите, повторяется ли градиент. Предпросмотр обновляется сразу.

3. 3

   Скопируйте CSS или скачайте PNG

   CSS состоит из двух деклараций: запасного варианта в sRGB и современной интерполированной версии над ним. Тот же градиент можно экспортировать как PNG любого размера до 4096 пикс или как SVG.

Зачем интерполировать в OKLCH

Градиент от синего к желтому в обычном sRGB в середине превращается в тускло-серый. Это не баг браузера: при поканальном усреднении красного, зеленого и синего хрома в середине падает до нуля, хотя глазу там хочется увидеть чистый зеленый. OKLCH — перцептивное пространство, поэтому те же две крайние точки дают середину, которая остается насыщенной, и плавный переход с ровным ростом яркости. В современном CSS можно явно указать пространство для интерполяции — `linear-gradient(90deg in oklch, ...)`. Этот генератор по умолчанию использует именно его, а когда нужен «старый» вид, доступны oklab, sRGB и HSL.

Почему запасная строка важнее, чем кажется

Браузер, который не понимает `in oklch`, не пропускает одно незнакомое слово — он отбрасывает всю декларацию целиком. Без запасного варианта вы получите не чуть другой градиент, а никакого: проявится фон, который лежит под ним. Поэтому в скопированном CSS всегда две строки `background-image`. Первая — запасная: шестнадцать промежуточных точек, посчитанных здесь в выбранном пространстве и записанных как обычные sRGB-шестнадцатеричные значения. Они достаточно точно повторяют ту же кривую, так что разницу почти никто не заметит. Вторая — современная однострочная запись, которую поверх применит любой поддерживающий браузер.

Повторяющиеся градиенты и особенность конических

Повторяющийся градиент выкладывает один и тот же набор точек плиткой до бесконечности. Это работает только когда последняя точка стоит ниже 100% — иначе нечему повторяться, и результат не отличается от обычного градиента. Такая ситуация перехватывается до копирования. У конических градиентов есть ограничение при экспорте: в SVG 1.1 вообще нет элемента конического градиента, поэтому кнопка SVG сообщает об этом и предлагает PNG. PNG рисуется как 720 клиньев по полградуса, чтобы корректно отображаться даже в старых версиях Safari.

Частые вопросы