Генератор градиента CSS онлайн

Генератор градиента CSS создаёт готовый код linear-gradient для вашего сайта - выберите два цвета и угол, и инструмент генерирует предпросмотр и CSS-код, готовый к копированию. Работает бесплатно в браузере, без регистрации и без отправки данных на серверы.

Что такое градиент CSS?

Градиент CSS - это визуальный эффект, при котором один цвет плавно переходит в другой. В CSS он создаётся с помощью функций linear-gradient(), radial-gradient() или conic-gradient(). Линейные градиенты чаще всего используются для фонов страниц, кнопок и баннеров.

Пример CSS-кода:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Параметры градиента:

• Угол - направление градиента (0° = сверху вниз, 90° = слева направо, 135° = по диагонали)
• Начальный цвет - цвет в начале градиента
• Конечный цвет - цвет в конце градиента

Как использовать Генератор градиента CSS - пошаговая инструкция

1. Откройте Генератор градиента CSS.
2. Выберите начальный цвет с помощью выборщика цветов или введите HEX-код.
3. Выберите конечный цвет аналогично.
4. Задайте угол градиента ползунком или введя значение в градусах.
5. Предпросмотр градиента обновляется мгновенно.
6. Скопируйте готовый CSS-код одним нажатием и вставьте в свой проект.

Примеры использования

• Фон сайта - создание эстетичного градиентного фона для секции hero
• Кнопки (CTA) - градиентные кнопки call-to-action с эффектом глубины
• Заголовки и баннеры - декоративные заголовки с цветным фоном
• Карточки и панели - современный вид карточек с градиентным фоном
• Презентации - градиентные слайды в Canva и PowerPoint
• Мобильные приложения - экспорт вдохновений по градиентам в Figma или XD

Часто задаваемые вопросы

Можно ли использовать более двух цветов в градиенте? Этот генератор создаёт двухцветные линейные градиенты. Чтобы добавить больше точек цвета (color stops), можно вручную изменить сгенерированный CSS-код, например: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f64f59 100%).

В чём разница между linear-gradient и radial-gradient? linear-gradient создаёт градиент вдоль прямой линии (диагональной, вертикальной или горизонтальной). radial-gradient создаёт градиент, распространяющийся от центра наружу радиально. Этот генератор работает с линейными градиентами.

Работают ли генерируемые градиенты во всех браузерах? Да, linear-gradient поддерживается во всех современных браузерах (Chrome, Firefox, Safari, Edge). Никакие префиксы (-webkit-, -moz-) не нужны.

Как использовать градиент в качестве фона элемента? Скопируйте сгенерированный код и вставьте в свойство background в CSS: background: linear-gradient(135deg, #667eea, #764ba2);. Можно использовать в background-image или сокращённом свойстве background.

Создавайте красивые CSS-фоны с Генератор градиента CSS - бесплатно и без регистрации.