Как сделать градиентный фон

Короткий ответ

Градиент — это картинка, поэтому его задают в background:

<div style="height: 100px; background: linear-gradient(to right, deepskyblue, mediumpurple);"></div>

Первое значение — направление: to right, to bottom (по умолчанию) или угол вроде 135deg. Дальше идут цвета.

Несколько цветов и позиции

Цветов может быть сколько угодно, а у каждого — своя позиция. Если две позиции совпадают, получается резкая граница вместо плавного перехода:

<div style="height: 50px; margin-bottom: 6px; background: linear-gradient(135deg, gold, tomato 50%, crimson);"></div>
<div style="height: 50px; background: linear-gradient(to right, teal 50%, orange 50%);"></div>

Радиальный градиент

radial-gradient() расходится от центра кругом или эллипсом:

<div style="height: 120px; background: radial-gradient(circle at 30% 40%, white, lightskyblue 40%, navy);"></div>

Градиент поверх картинки

Через запятую можно положить полупрозрачный градиент на фото, чтобы текст на нём читался:

.hero { background: linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 70%)), url(/media/photo-800x500.jpg) center / cover; }

Частая ошибка

Пишут background-color: linear-gradient(...) — и ничего не происходит. Градиент — это изображение, а не цвет, поэтому он работает только в background или background-image.