Генератор градиентов
Онлайн-инструмент для создания CSS-градиентов, линейных и радиальных, с визуальной настройкой и копированием кода
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);Что такое CSS-градиент?
CSS-градиент — это эффект плавного перехода между двумя и более цветами. Линейный градиент переходит вдоль прямой линии, радиальный — от центра наружу. Градиенты используются для фонов, кнопок, карточек и других элементов для улучшения визуального эффекта.
Использование
- Выберите тип градиента: линейный или радиальный
- Добавьте цветовые точки и настройте позицию каждой
- Для линейного градиента можно настроить угол направления
- Просматривайте результат в реальном времени
- Нажмите «Копировать код» для получения CSS
- Выберите шаблон для быстрого применения популярных градиентов
Типичное применение
- Фон страницы: добавление градиентного фона для страницы или блока
- Стили кнопок: создание градиентных кнопок для повышения吸引力
- Декор карточек: градиентные границы или фон для карточек
- Фирменные цвета: создание градиентов из цветов бренда
- UI-дизайн: быстрое создание градиентных прототипов для дизайн-справок
Часто задаваемые вопросы
В: В чём разница между линейным и радиальным градиентом?
О: Линейный градиент переходит вдоль линии под указанным углом; радиальный градиент переходит от центра наружу, напоминая круговое распространение.
В: Что означает позиция цветовой точки?
О: Позиция в процентах показывает, где цвет появляется в градиенте: 0% — начало, 100% — конец. Например, два цвета на 0% и 50% дадут переход на первой половине градиента.
В: Как создать многоцветный градиент?
О: Нажмите «Добавить цвет» для добавления новых цветовых точек, для каждой можно задать разную позицию, создавая сложные градиентные эффекты.
В: Как использовать сгенерированный CSS-код?
О: После копирования кода используйте его как значение background или background-image в CSS, например: .element { background: linear-gradient(...); }