Прежде чем в 2012 году спецификация CSS Images Level 3 закрепила единый синтаксис градиентов, у каждого браузера был свой, и переход между ними ломался при смене движка — эта история всё ещё видна в старых учебниках и легаси-коде.
-webkit-gradient(): забытый прототип
Ранний Safari (WebKit, 2008 год) ввёл градиенты через громоздкую функцию -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) — с явным перечислением точек и стоп-функций from()/to()/color-stop(). Firefox и Opera в то же время предлагали собственные варианты с префиксами -moz- и -o-, несовместимые друг с другом. Современный linear-gradient(45deg, red, blue) — результат того, что W3C в итоге выбрал более простой и читаемый синтаксис Mozilla как основу стандарта.
Три геометрии перехода
Сегодня спецификация описывает три формы: linear-gradient() растягивает цвет вдоль прямой под заданным углом, radial-gradient(circle, yellow, orange) расходится кругами или эллипсами от точки, а conic-gradient(red, yellow, green, blue, red) вращает цвет вокруг центра, как стрелка часов, — единственный тип, пригодный для кругового индикатора прогресса без SVG.
Color stops и точное позиционирование
Каждый цвет можно закрепить на конкретном проценте, например linear-gradient(red 0%, yellow 50%, blue 100%), управляя не только палитрой, но и резкостью перехода. Хвостовые функции repeating-linear-gradient() и repeating-radial-gradient() зацикливают ту же последовательность стопов, создавая полосы или шахматный узор одной строкой CSS вместо десятков вручную заданных стопов.
Зачем это нужно
- Собрать современный, кросс-браузерный CSS-код градиента без вспоминания устаревших вендорных синтаксисов.
- Понять, какой тип градиента даёт нужный визуальный эффект.
- Точно расставить color stops для конкретного перехода цветов.
Градиенты возвращаются в дизайн
После нескольких лет господства плоского дизайна (Windows 8, iOS 7 в 2013 году) веб-дизайн середины 2010-х снова вернулся к градиентам — сначала как к фирменному приёму (яркая розово-оранжевая заливка иконки Instagram, представленная в 2016 году), а затем как к общему тренду в интерфейсах стартапов и лендингов, где мягкий цветовой переход на фоне стал заменять фотографии и текстуры.