Начнём с основы
Градиенты — это значения <image>: linear-gradient, radial-gradient, conic-gradient (+ repeating-*).
.hero {
background: linear-gradient(135deg, #0f766e, #155e75 40%, #1e3a5f);
}
.dot {
background: radial-gradient(circle at 30% 30%, #fff, #94a3b8);
}
Можно комбинировать несколько фонов через запятую. Для текста иногда background-clip: text.
Итог
Градиент задаётся в background-image (или shorthand background), без отдельных картинок.
