How to make gradient text

Short answer

Give the text a gradient background, clip the background to the letters and make the letters themselves transparent:

<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>

How it works

background-clip: text keeps the background only where there are letters. A transparent color is needed so the normal text color does not cover that background.

Width fitted to the text

A heading is a full-width block, so the gradient spans the whole line and a short word only shows its start. Make it inline-block:

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

Common mistake

If a browser does not support background-clip: text, transparent text vanishes entirely. Today the property works everywhere, but such text is hard to see when selected, and high contrast mode removes the gradient. Do not use it for body text — only large headings.