Генератор CSS-градиентов
Бесплатно · без регистрацииСоберите линейный или радиальный градиент и скопируйте CSS.
background: linear-gradient(90deg, #7c3aed, #4faa82);Соберите CSS-градиент визуально — выберите два цвета, линейный или радиальный тип, задайте угол и скопируйте готовый CSS. Превью обновляется на лету. Бесплатно, без регистрации.
- ✓Линейные и радиальные градиенты
- ✓Два цвета и угол
- ✓Живое превью
- ✓Копирование CSS в один клик
- ✓Бесплатно — без регистрации
Кому подходит
- Фоны и кнопки
- Hero-секции и карточки
- Прототипирование дизайна
- Изучение CSS-градиентов
Как это работает
- 1Выберите два цвета.
- 2Тип (линейный/радиальный) и угол.
- 3Смотрите живое превью.
- 4Скопируйте CSS.
Частые вопросы
Как сделать CSS-градиент?+
Свойство background с linear-gradient() или radial-gradient(), указав направление и цветовые точки. Инструмент пишет это за вас.
Чем линейный отличается от радиального?+
Линейный смешивает цвета вдоль прямой под заданным углом; радиальный — от центра наружу по кругу.
Это бесплатно?+
Да, полностью бесплатно и работает в браузере.
Вам может пригодиться
Некоторые ссылки — партнёрские, подробнее
Похожие инструменты
Форматирование, проверка и минификация JSON в браузере.
Кодирование и декодирование Base64, с поддержкой UTF-8.
Декодируйте заголовок и payload JWT в браузере.
Проверяйте регулярные выражения с подсветкой совпадений.
Кодирование и декодирование URL и query-строк.
Генерация случайных UUID v4, в том числе списком.