Градиент в CSS обычно знают по одной строчке: linear-gradient(red, blue) скопировали из генератора, подкрутили цвета — готово. Но стоит попросить жёсткую полосу вместо плавного перехода, круг не по центру или крест на фоне, и начинается подбор чисел наугад.
В этом мануале градиенты разбираются на понятной и честной задаче — флагах стран, нарисованных одним пустым элементом. У флага есть точные пропорции и точные цвета, поэтому сразу видно, где ошибка. По дороге разберём все три вида градиентов (линейные, радиальные и конические), их повторяющиеся версии, наложение нескольких фонов, а также то, что делать, когда градиента уже не хватает.
Пропорции флагов не случайны: каждая страна закрепляет их в законе или государственном стандарте — вместе с цветами и положением деталей. Единой пропорции у флагов нет: у Украины и Италии соотношение сторон 3:2, у Литвы — 5:3, у Финляндии — 18:11, а флаг Катара вытянут до 28:11. Поэтому aspect-ratio в примерах везде разный: у каждого флага стоит его официальное соотношение. И это не формальность — позиции цветов в градиентах задаются в процентах, так что при другой пропорции полосы и фигуры съехали бы со своих мест.
К концу останется не набор рецептов, а понимание: как браузер раскладывает цвета по линии, кругу или углу и как из этого собрать полосы, кресты, треугольники и диаграммы без картинок. Каждый приём — с живым демо, в конце — тест по теме.
