Три типа градиентов в CSS
Градиент — это плавный переход между цветами, который браузер рисует сам, без картинок. Он масштабируется без потери качества, ничего не весит и настраивается прямо в коде.
| Тип | Как работает | Где применяют |
|---|---|---|
| linear-gradient | Переход вдоль заданной оси | Фоны секций, кнопки, оверлеи |
| radial-gradient | От центральной точки наружу | Свечения, подсветки, объёмные элементы |
| conic-gradient | По кругу вокруг центра | Диаграммы, индикаторы прогресса, цветовые круги |
Как задаётся направление
В линейном градиенте угол отсчитывается от направления вверх по часовой стрелке. Ноль градусов — переход снизу вверх, 90 — слева направо, 180 — сверху вниз. Вместо угла можно писать ключевые слова вида to right или to bottom left — это то же самое, но нагляднее.
Точки остановки задают, где именно цвет достигает полной насыщенности. Без них цвета распределяются равномерно. Если поставить две точки с одинаковым положением, переход станет резким — так делают полосатые фоны без единого изображения.
Практические советы
- Берите близкие оттенки. Градиент из синего в оранжевый пройдёт через грязно-серую середину. Соседние цвета на круге дают чистый переход
- Не более двух-трёх цветов. Больше выглядит пёстро и отвлекает от содержимого
- Проверяйте контраст текста. Белый текст читается на тёмном конце градиента и пропадает на светлом
- Оверлей для фото. Полупрозрачный градиент поверх изображения делает подпись читаемой
- Осторожно с яркостью. Насыщенный градиент на всю страницу утомляет глаз, лучше приглушить
Поддержка браузерами
Линейные и радиальные градиенты работают везде, включая старые версии. Конические поддерживаются во всех современных браузерах с 2021 года — если проект не требует поддержки древних версий, использовать можно свободно.