Текстовый градиент

Сегодня во многих местах можно увидеть такие приятные трюки, как текстовый градиент... но? Вы когда-нибудь задумывались, как они сделаны? Позвольте мне научить вас сегодня.

.text-gradient {
  background: linear-gradient(-25deg, #5662f6 0%, #7fffd4 100%);
  color: transparent;
  background-clip: text;
}

Смотрите, сначала мы задали градиент фону текста. Затем мы сделаем цвет текста ПРОЗРАЧНЫМ, чтобы его не было видно.
После этого мы воспользуемся свойством background-clip, чтобы сделать текст таким, чтобы цвет фона менялся на цвет текста.

Если вы хотите узнать еще 4 таких трюка, нажмите на изображение ниже?