Генератор CSS-градиентов
Создавайте линейные и радиальные градиенты визуально, затем копируйте готовый CSS. Всё обновляется вживую в вашем браузере.
Как сделать CSS-градиент
- Выберите линейный или радиальный градиент, затем задайте угол для линейного градиента.
- Выберите цвета для точек и задайте позицию каждой от 0 до 100.
- Добавляйте или удаляйте точки, чтобы сформировать переход как угодно.
- Скопируйте сгенерированный CSS в таблицу стилей или атрибут style.
Частые вопросы
Что такое линейный градиент?
Линейный градиент плавно смешивает цвета вдоль прямой линии под выбранным углом — от 0 до 360 градусов.
Что такое радиальный градиент?
Радиальный градиент смешивает цвета наружу от центральной точки в круговой или эллиптической форме.
Что означают числа позиции?
Каждая позиция — это процент вдоль градиента, от 0% в начале до 100% в конце. Точки автоматически сортируются по позиции.
Работает ли градиент во всех браузерах?
Да. Сгенерированный CSS использует стандартные функции linear-gradient и radial-gradient, поддерживаемые всеми современными браузерами.
Похожие инструменты
Зачем использовать генератор градиентов?
Используйте генератор CSS-градиентов, чтобы создавать плавные цветовые переходы визуально, не угадывая значения в коде, и мгновенно копировать готовый к продакшену CSS.
- Смотрите, как градиент меняется вживую при настройке цветов, углов и точек.
- Копируйте точный валидный CSS, не выискивая синтаксические ошибки.
- Создавайте многоточечные фоны для кнопок, баннеров и секций за секунды.
Советы и ограничения
Вы можете добавить сколько угодно цветовых точек, а генератор сохраняет как минимум две, чтобы градиент всегда был валидным. Точки сортируются по позиции перед генерацией CSS.