Как работает градиентый текст в данном случае?

1. Задний фон

Начнём с первого свойства.

background: var(--third-gradient);

Как мы можем наблюдать используется свойство background, а значение у неё var(--third-gradient), судя из названия переменной, это градиент. background само по себе свойство объединяет другие свойства, по типу:

• background-color
• background-size
• background-image
• и т.п.

А CSS может определять куда заносить значения свойств, допустим если мы укажем в background какой-то цвет, то он будет использоваться для background-color, в нашем случае это градиент и он применится на background-image.

Вот пример с цветом:

#block {
  width: 100px;
  height: 100px;
  background: red;
}

<div id="block"></div>

Далее свойство background-clip.

-webkit-background-clip: text;
        background-clip: text;

Сам background-clip был добавлен поздновато, а в браузерах была только реализация с префиксом -webkit-, а уже само свойство "подвезли" позже, поэтому нам как разработчикам нужно писать два варианта для поддержки старых браузеров. Само свойство указывает, то на что примениться задний фон. По стандарту это свойство равно border-box (то-есть на сам элемент), а тут его меняют на text, чтобы задний фон применился на текст.

Вот примеры использования background-clip:

.example {
  background-color: red;
  color: white;
  width: 75px;
  height: 75px;
  margin: 2px;
}

#example1 {
  background-clip: border-box; /* стандартное значение */
}

#example2 {
  background-clip: text; /* применяется на текст */
  color: transparent;
}

<div id="example1" class="example">Пример</div>
<div id="example2" class="example">Пример</div>

2. Текст

Теперь текст.

color: transparent;

Как видно из кода, цвет для текста был выбран прозрачный, это сделано для того, чтобы цвет текста не заграждал цвет заднего фона (задний фон на то и задний, что применяется сзади элемента), поэтому его и делают прозрачным.

3. Пример такого текста

:root {
  --third-gradient: linear-gradient(to right, red, orange)
}

.cool-af-text {
  background: var(--third-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  font-size: 42px;
  font-weight: bolder;
  font-family: 'Segoe UI';
}

<p class="cool-af-text">Пример текста</p>