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

Как это работает

Каждая контрольная точка цвета — это объект с цветом и позицией от 0 до 100. При любом изменении точки сортируются по позиции перед сборкой строки, поэтому вы можете добавлять их в любом порядке — результат всегда корректен. Затем они собираются в linear-gradient(<угол>deg, ...) или radial-gradient(circle, ...) в зависимости от выбранного типа. Та же строка применяется как фон предпросмотра и выводится как результат — то есть предпросмотр действительно рисуется тем CSS, который вы копируете, а не приближённо.

Если градиент между двумя насыщенными цветами выглядит блёкло посередине — это не баг инструмента: браузеры по умолчанию вычисляют градиенты в цветовом пространстве sRGB, а прямой путь между некоторыми парами цветов (классический пример — синий и жёлтый) проходит через тусклый, ненасыщенный серый. Решение — добавить промежуточную точку с настоящим ярким цветом, который вам нужен, что этот инструмент делает удобным.

Весь градиент собирается и применяется в JavaScript этой страницы; выбор цвета или перемещение ползунка угла не создаёт ни одного сетевого запроса, и вы можете проверить это сами во вкладке «Сеть» инструментов разработчика.