Генератор CSS-градиентов
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Зачем использовать визуальный генератор градиентов?
Ручное написание CSS-градиентов трудоёмко — запоминание синтаксиса linear-gradient(), radial-gradient() и conic-gradient() с несколькими точками остановки и позициями подвержено ошибкам. Наш визуальный генератор позволяет управлять точками остановки цвета через селекторы и слайдеры положения, с живым просмотром, обновляющимся мгновенно, делая создание градиентов быстрым и интуитивным.
3 типа градиентов
Линейные, радиальные и конические градиенты — все поддерживаются со специфическими элементами управления для каждого типа
Многоцветные градиенты
Добавляйте неограниченное количество точек остановки цвета и перетаскивайте их позиции для создания сложных градиентов
Живой просмотр
Видите, как градиент рендерится в реальном времени при настройке цветов, позиций и угла
Как создать CSS-градиент
Выберите тип градиента
Выберите линейный, радиальный или конический градиент и установите угол или направление
Настройте точки остановки
Используйте селекторы для установки цвета каждой остановки и слайдеры для их позиционирования
Скопируйте CSS
Нажмите 'Копировать CSS' для полного свойства background, готового для таблицы стилей
Случаи использования CSS-градиентов
Фоны секций hero
Создавайте впечатляющие фоны всей страницы с диагональными или радиальными градиентами
Текст с градиентом
Применяйте градиенты к тексту с помощью background-clip: text для поразительных типографических эффектов
Границы с градиентом
Используйте градиенты с border-image для создания цветных рамок элементов
Наложения на изображения
Накладывайте градиенты на изображения для создания тёмных наложений, обеспечивающих читаемость текста
Лучшие практики CSS-градиентов
✓ Используйте 135deg для диагональных градиентов
Угол 135 градусов создаёт классическую диагональ из левого верхнего в нижний правый, которая выглядит естественно и динамично — популярный выбор для секций hero.
✓ Делайте градиенты тонкими для интерфейса
Для элементов интерфейса (кнопки, карточки) используйте очень тонкие градиенты одного тона с разницей яркости 10-20%, чтобы добавить глубину без визуального шума.
✓ Предоставляйте запасной цвет
Добавляйте сплошной background-color перед градиентом как резерв: background-color: #6366f1; background: linear-gradient(...).
✓ Анимируйте позицию градиента
CSS-градиенты нельзя напрямую анимировать, но можно анимировать background-position на большем градиенте для создания плавного эффекта движения.
❓ Часто задаваемые вопросы
В чём разница между линейными, радиальными и коническими градиентами?
Линейные градиенты переходят вдоль прямой линии под углом. Радиальные радиируют из центральной точки в кругах или эллипсах. Конические вращаются вокруг центральной точки как круговая диаграмма — идеально для колёс прогресса и цветовых кругов.
Как создать прозрачный градиент?
Используйте transparent как точку остановки: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent). Это создаёт градиент от полупрозрачного цвета до полностью прозрачного — идеально для наложений на изображения.
Почему у моего градиента есть полосы?
Полосчатость (видимые полосы между цветами) появляется на дисплеях низкого качества или при переходе между похожими оттенками. Добавьте промежуточную точку остановки в дополнительном тоне для сглаживания перехода.
Могу ли я использовать градиенты в качестве границ?
Да, используйте border-image: linear-gradient(...) 1. Это устанавливает градиент как изображение границы. Alternatively, используйте псевдоэлемент ::before с фоном-градиентом и отрицательным z-index для имитации градиентных границ.