CSS-градиенты

Как устроены CSS-градиенты

CSS-градиент — это изображение, которое рисует сам браузер. Линейный идёт вдоль заданного угла, радиальный расходится из точки, а конический вращается вокруг неё — поэтому он удобен для круговых диаграмм и цветовых кругов. Каждому нужен список опорных цветов, всё между ними браузер заполняет сам.

Как сделать градиент чистым

Портят градиенты обычно две вещи. Первая — «грязная» середина: смешение противоположных оттенков в sRGB проходит через серый, поэтому добавьте промежуточную опорную точку или интерполируйте в OKLCH. Вторая — полосы на больших площадях: помогают более близкие по светлоте цвета или лёгкое зерно поверх.

Когда брать линейный, радиальный или конический?

Линейный — для фонов, кнопок и разделителей, то есть везде, где есть направление. Радиальный — для подсветки, свечения и мягких акцентов. Конический — для всего, что идёт по кругу: круговых диаграмм, цветовых кругов и эффекта «блика», обегающего карточку.

Почему в середине градиента появляется серый?

Потому что по умолчанию браузер интерполирует в sRGB, а прямая между двумя противоположными оттенками проходит рядом с серым. Добавьте третью опорную точку с промежуточным оттенком или интерполируйте в OKLCH — середина останется насыщенной.

Градиенты замедляют страницу?

Практически никогда: градиент рисует композитор браузера, и он дешевле картинки той же площади. Исключение — анимация: двигать background-position или прозрачность недорого, а вот анимация самих опорных цветов заставляет перерисовывать каждый кадр.

Везде ли они работают?

Линейные и радиальные — во всех актуальных браузерах. Конические поддерживаются современными браузерами, но не совсем старыми, поэтому для legacy-версий задайте запасной сплошной background-color.