Как создавать CSS-градиенты
CSS-градиенты позволяют создавать плавные цветовые переходы без файла изображения. Они легче изображений, идеально адаптируются к любому размеру экрана и просты в настройке.
Типы CSS-градиентов
Линейный градиент — цвета переходят по прямой линии (сверху вниз, слева направо или под любым углом).
background: linear-gradient(135deg, #667eea, #764ba2);Радиальный градиент — цвета излучаются от центральной точки в круговой или эллиптической схеме.
background: radial-gradient(circle, #667eea, #764ba2);Конический градиент — цвета вращаются вокруг центральной точки, как цветовое колесо.
background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);Как создавать градиенты визуально
- Выберите тип градиента — выберите линейный или радиальный и настройте угол или позицию.
- Добавьте точки цвета — нажмите, чтобы добавить цвета в разных позициях градиента. Настройте каждый цвет и его позицию.
- Скопируйте CSS — скопируйте сгенерированный код и вставьте его в вашу таблицу стилей.
Использование визуального генератора быстрее, чем написание синтаксиса вручную, особенно с несколькими точками цвета.
Распространённые шаблоны градиентов
Фон hero-секции — тонкий двухцветный градиент добавляет глубину, не отвлекая от текста.
background: linear-gradient(135deg, #0f172a, #1e3a5f);Подсветка кнопки — лёгкий градиент даёт трёхмерный эффект кнопкам.
background: linear-gradient(180deg, #3b82f6, #2563eb);Затемнение на изображении — градиентное затемнение улучшает читаемость текста на фотографиях.
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));Акцентная граница — используйте градиент в качестве границы для создания визуального интереса.
border-image: linear-gradient(90deg, #667eea, #764ba2) 1;Советы
- Будьте сдержанны — лучшие градиенты едва заметны. Лёгкий переход между двумя похожими цветами добавляет глубину. Драматичные радужные градиенты редко выглядят профессионально.
- Используйте градиенты вместо изображений — CSS-градиент загружается мгновенно без сетевого запроса. Заменяйте декоративные фоновые изображения градиентами, когда возможно.
- Тестируйте в тёмном режиме — градиенты, которые хорошо рендерятся на светлом фоне, могут блёкнуть или плохо смотреться в тёмном режиме. При необходимости определите разные градиенты для каждой темы.
- Внимание к контрасту текста — если вы помещаете текст на градиент, проверьте, что он остаётся читаемым по всему диапазону градиента, а не только на самой светлой или тёмной части.
Часто задаваемые вопросы
Работают ли CSS-градиенты во всех браузерах?
Да. Линейные и радиальные градиенты поддерживаются во всех современных браузерах, включая Chrome, Firefox, Safari и Edge. Конические градиенты имеют немного более позднюю поддержку, но работают во всех текущих версиях.
Можно ли использовать больше двух цветов?
Да. CSS-градиенты принимают столько точек цвета, сколько вы хотите. Каждая точка определяет цвет и позицию вдоль градиента.
Влияют ли градиенты на производительность?
Нет. CSS-градиенты рендерятся браузером и намного легче, чем файлы изображений. Они идеально адаптируются к любому размеру экрана без дополнительной загрузки.
Можно ли анимировать градиент?
Не напрямую CSS-переходом на свойстве background, но вы можете анимировать background-position или использовать пользовательские CSS-свойства с @property для создания плавных анимаций градиентов.