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

Как работает

Линейный градиент идёт под заданным углом: 0° — снизу вверх, 90° — слева направо. Радиальный строится от центра круга. Позиции в процентах задают, где начинается и заканчивается переход цвета.

Код записывается в свойство background. Если позиции поменять местами, браузер сам упорядочит точки по возрастанию, но лучше задавать их по порядку.

Прозрачность через color input не задаётся. Для неё добавьте цвет в формате rgba() вручную в код.

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

Чем линейный отличается от радиального?

Линейный переходит по прямой, радиальный — от центра к краям.

Можно больше двух цветов?

В этом генераторе нет. Два цвета покрывают большинство задач; третий добавляется в код вручную.

Где использовать?

Фон секции, кнопки, обложки. Для текста градиент требует background-clip: text и отдельной проверки контраста.

Данные уходят на сервер?

Нет.

Связанные инструменты

Перевести цвет в RGB — в конвертере HEX ↔ RGB. Сделать favicon — в генераторе favicon. Сжать картинку для фона — в сжатии изображений.