В математике градиент — это функция, показывающая направление наискорейшего возрастания некоторой величины, значение которой меняется от одной точки пространства к другой.

Если применить градиент к цвету, то получится плавный переход от одного цвета к другому. Например, вот такой:

Градиенты описываются внутри CSS-свойства background-image. Простейший градиент можно описать таким образом:

background-image: linear-gradient(yellow, green);

Сам градиент создаётся функцией linear-gradient, в параметрах которой указываются направление градиента и набор цветов. Направление можно не указывать, тогда будет использовано значение по умолчанию — сверху вниз. Цветов может быть любое количество.

Давайте потренируемся и создадим простейший двухцветный градиент для блока .content.