Генератор градиентов CSS
CSS-градиенты с живым превью
Как использовать Генератор градиентов CSS
CSS-градиенты с живым превью Бесплатный онлайн-инструмент, без регистрации, без навязчивой рекламы. Используйте прямо сейчас.
Где применяются CSS-градиенты?
CSS-градиенты создают плавные переходы цветов прямо в браузере без загрузки файлов изображений — обеспечивая богатые визуальные эффекты без дополнительных HTTP-запросов, ускоряя загрузку страниц и улучшая Core Web Vitals.
- Фоны секций-героев: Полноширинный градиентный фон на лендинге создаёт визуальный эффект без тяжёлых изображений. Линейный градиент от основного к второстепенному бренд-цвету мгновенно создаёт визуальную идентичность сайта.
- Стилизация кнопок: Градиентный фон CTA-кнопок придаёт глубину и визуальный вес.
background: linear-gradient(135deg, #7B35F5, #C040A0)— яркий диагональный градиент. - Градиентный текст: Применяйте градиент к тексту через
background-clip: textи-webkit-text-fill-color: transparent. Визуально выразительные заголовки — популярный тренд в веб-дизайне. - Оверлеи на изображениях: Полупрозрачный градиентный оверлей (от прозрачного к чёрному) на изображении улучшает читаемость перекрывающего текста без полного перекрытия фона.
- Прогресс-бары и визуализация: Градиентная заливка прогресс-баров и графических элементов делает данные визуально привлекательнее.
Типы градиентов: linear-gradient(направление, цвет1, цвет2) — направленные. radial-gradient(форма, цвет1, цвет2) — круговые/эллиптические. conic-gradient(цвет1, цвет2) — конические, вращающиеся вокруг точки (CSS4 — поддерживается всеми современными браузерами).
В чём разница между линейным, радиальным и коническим градиентами?
Линейный — переход вдоль прямой линии (сверху вниз, слева направо, под любым углом). Радиальный — исходит из центральной точки кругом или эллипсом. Конический — вращается вокруг центральной точки, как колесо цветов. Каждый создаёт принципиально разный визуальный эффект.
Как создать повторяющийся градиент?
Используйте repeating-linear-gradient() или repeating-radial-gradient(). Задайте градиент с определённой длиной: repeating-linear-gradient(45deg, красный 0px, красный 10px, синий 10px, синий 20px) создаёт диагональные полосы.
Можно ли анимировать CSS-градиент?
Сам gradient нельзя напрямую анимировать через CSS — background-image не анимируется. Альтернативы: background-position с увеличенным background-size для эффекта движения; или CSS-переменные для цветов с их анимацией.
Что означает угол в linear-gradient?
Угол измеряется по часовой стрелке от верха. 0deg — вверх (снизу вверх), 90deg — вправо (слева направо), 180deg — вниз (сверху вниз), 45deg — по диагонали вниз вправо. Можно использовать ключевые слова: to top, to bottom, to right, to bottom right.
Как создать градиент с несколькими цветовыми остановками?
Добавьте значения цветов через запятую: linear-gradient(135deg, #ff0000 0%, #ff8800 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%). Проценты задают позицию каждого цвета. Совпадающие остановки создают резкий переход вместо плавного.
CSS-градиент vs SVG-градиент vs графический градиент
CSS-градиенты не требуют внешних файлов, масштабируются идеально, легко анимируются — первый выбор для фонов и UI-эффектов. SVG-градиенты можно применять к SVG-фигурам и путям. Графические градиенты (PNG, JPG) нужны для очень сложных эффектов, недостижимых в CSS. Для веб-фонов и элементов UI всегда предпочитайте CSS-градиенты изображениям — нет HTTP-запроса, нулевой размер файла, быстрее рендеринг.