Gradient text in CSS

For example, the HTML code is:

The CSS is:

        .gradient-text {
          background: linear-gradient(to bottom, yellow 0%, orange 30%, orangered 30%, red 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
        

What it does:

You set the background of an element, background-clip makes the background clip around the text, and for the background to be visible, color: transparent does the job.

The output is:

Text