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

• Выберите основу в галерее: линейные сочетания, радиальный свет, цветовой круг, диаграмму, полосы, затемнение для фото или многослойную «Аврору». Выбранный пример выделяется рамкой.
• Цвета задаются метками на полосе. Щелчок по полосе добавляет цвет, метку можно перетащить мышью или пальцем либо сдвинуть стрелками (Shift — шагом 10%). Delete удаляет выбранный цвет, в слое остаётся не меньше двух. У выбранного цвета под полосой настраиваются значение, непрозрачность и позиция.
• Тип градиента, угол, форма и центр настраиваются под цветами. «Повторять узор» превращает градиент в repeating-…-gradient: участок между первой и последней меткой повторяется до края.
• Слои — вкладки над настройками, их бывает до 4. Первый слой лежит сверху, его прозрачные участки открывают нижние. Порядок меняется перетаскиванием вкладки или Alt + ← / →.
• Фон под градиентом (шахматка, светлый, тёмный) показывает, как выглядят прозрачные участки. В CSS он не попадает. Кнопка развёртывания открывает инструмент на всё окно.
• Скопируйте CSS или ссылку на градиент: по ссылке откроются те же настройки. «Сбросить» возвращает исходный градиент.

Градиент — это изображение, поэтому его задают свойством background-image. Запись linear-gradient(135deg, #7367f0 0%, #35c9c1 100%) читается так: направление, затем цвета с позициями. Две метки на одной позиции дают резкую границу — так рисуют полосы и диаграммы.

• linear-gradient меняет цвет вдоль линии под заданным углом: 0deg — снизу вверх, 90deg — слева направо.
• radial-gradient расходится из центра кругом или эллипсом.
• conic-gradient меняет цвет по кругу вокруг центра; позиция в процентах — доля оборота.

Пространство смешивания задаёт, какими будут промежуточные цвета. sRGB работает везде, но середина перехода между яркими цветами бывает серой. OKLab и OKLCH (in oklab, in oklch) дают ровные и яркие переходы. Для них генератор добавляет запасную строку без пространства: браузер, который не понимает новую запись, пропустит её и возьмёт первую.