CSS-градиенты — мощный инструмент для создания плавных переходов между цветами без использования изображений. Они уменьшают количество HTTP-запросов, масштабируются без потери качества и легко анимируются.
Линейный градиент
Самый распространённый тип. Цвета переходят друг в друга вдоль прямой линии:
background: linear-gradient(to right, #667eea, #764ba2);
Направление задаётся ключевыми словами (to right, to bottom right) или углом (45deg, 90deg).
Радиальный градиент
Цвета расходятся от центральной точки:
background: radial-gradient(circle, #667eea, #764ba2);
Можно задать форму (circle, ellipse) и положение центра.
Практические советы
- Используйте 2–3 цвета для естественных переходов
- Проверяйте контраст текста на фоне градиента
- Добавляйте fallback-цвет для старых браузеров
- Градиенты отлично работают как overlay поверх изображений
Заключение
Создайте идеальный градиент визуально в нашем генераторе CSS-градиентов. Также попробуйте генератор теней и генератор border-radius.
