Как сделать текст с градиентом

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

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

<style>
  .gradient {
    font-size: 40px; font-weight: 800; margin: 0;
    background: linear-gradient(90deg, deeppink, orange);
    background-clip: text;
    color: transparent;
  }
</style>
 
<h1 class="gradient">Big Sale</h1>

Как это работает

background-clip: text оставляет фон только там, где есть буквы. А прозрачный color нужен, чтобы обычный цвет текста не закрыл этот фон.

Ширина по тексту

Заголовок — блочный элемент на всю ширину, поэтому градиент растягивается по всей строке, и у короткого слова видно только начало. Сделайте его строчно-блочным:

<h2 style="display: inline-block; margin: 0; font-size: 32px; background: linear-gradient(90deg, teal, royalblue, purple); background-clip: text; color: transparent;">Hello</h2>

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

Если браузер не поддержит background-clip: text, прозрачный текст исчезнет совсем. Сегодня свойство работает везде, но выделенный такой текст плохо виден, а в режиме высокой контрастности градиента не будет. Не делайте так основной текст — только крупные заголовки.