CSS Gradient Generator

Об этом инструменте

Генератор CSS-градиентов создаёт плавные многоцветные градиенты, которые можно напрямую вставить в CSS. Поддерживает линейные (направленные) и радиальные (круговые) градиенты с любым количеством точек цвета.

Точки цвета определяют, где начинается и заканчивается каждый цвет вдоль оси градиента. Ползунок угла поворачивает линейные градиенты от 0° до 360°.

Как использовать

1. Выберите тип градиента: Линейный или Радиальный.
2. Для линейных градиентов перетащите ползунок угла для выбора направления.
3. Кликните на образец цвета для его изменения и перетащите ползунок для корректировки позиции.
4. Нажмите + Добавить для новых точек цвета. ✕ — для удаления.
5. Нажмите Копировать для копирования CSS-объявления background.

Случаи использования

Веб-дизайнеры создают фоны для hero-секций с CSS-градиентами вместо изображений. Команды брендинга генерируют палитры градиентов под корпоративные руководства по цвету. Разработчики прототипируют карточки, кнопки и оверлеи.

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

• В чём разница между линейными и радиальными градиентами? — Линейный градиент переходит между цветами вдоль прямой линии под заданным углом. Радиальный градиент излучает цвета от центральной точки наружу.
• Можно использовать более двух цветов? — Да. Нажмите + Добавить для добавления нужного количества точек цвета.
• Сгенерированный CSS совместим с разными браузерами? — Да. Функции linear-gradient() и radial-gradient() полностью поддерживаются во всех современных браузерах без вендорных префиксов.