Как работают `background-clip` и `background-origin`?

СобеседованиеЦвета и фон

background-clip — где ОБРЕЗАЕТСЯ фон: border-box, padding-box, content-box, text
background-origin — откуда НАЧИНАЕТСЯ фон: border-box, padding-box (default), content-box
background-clip: text + transparent text — текст с фоновым изображением

.gradient-text {
  background: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}