Генератор CSS-градиентов
Создавайте CSS-градиенты визуально и копируйте код.
Рекомендуемые следующие шаги
Похожие инструменты
Преобразуйте цвета между HEX, RGB и HSL и проверьте контраст по WCAG.
Проверьте регулярное выражение на тексте и посмотрите совпадения и группы захвата.
Создайте QR-код из любого текста или ссылки и скачайте его в PNG или SVG.
Частые вопросы
Он выдаёт готовое к вставке объявление background с использованием стандартной функции linear-gradient() или radial-gradient() — например, background: linear-gradient(90deg, #1a6741 0%, #7ed957 100%);. Скопируйте его прямо в таблицу стилей или в атрибут style.
Нажмите кнопку «Добавить цветовую точку», чтобы вставить дополнительные точки, затем задайте цвет каждой точки и её положение от 0% до 100%. Инструмент автоматически сортирует точки по положению, поэтому их можно добавлять в любом порядке, а сгенерированный CSS остаётся согласованным.
Угол задаёт направление перехода цветов. 0deg направляет градиент вверх, 90deg — вправо, а 180deg — вниз. Перетаскивайте ползунок угла, чтобы повернуть градиент, и наблюдайте за обновлением предпросмотра в реальном времени.
Нет. Градиент полностью строится в вашем браузере с помощью обычного CSS: нет загрузки, нет учётной записи, и ничего не покидает эту страницу. После загрузки страницы инструментом можно пользоваться офлайн.
Последнее обновление: 2026-06-23.