方式一

效果1

background-image: -webkit-linear-gradient(...) 为文本元素提供渐变背景。
-webkit-text-fill-color: transparent 使用透明颜色填充文本。
-webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。
缺点：webkit内核浏览器特有

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变色</title>
    <style>
        .box {
            position: relative;
            text-align: left;
            text-indent:30px;
            line-height: 50px;
            font-size: 40px;
            font-weight: bolder;

            background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow); 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
        }
    </style>
</head>
<body>
    <div class="box">
        Hello World ~
    </div>
</body>
</html>

方式二

效果2

使用：mask-image
缺点：webkit内核浏览器特有

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变色</title>
    <style>
        .box {
            position: relative;
            text-align: left;
            text-indent:30px;
            line-height: 50px;
            font-size: 40px;
            font-weight: bolder;

            color: red;
            -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
        }
    </style>
</head>
<body>
    <div class="box">
        Hello World ~
    </div>
</body>
</html>

方式三

svg方式

效果3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变色</title>
    <style>
        .box-text {
            fill: url(#SVGID_1_);
            font-size: 40px;
            font-weight: bolder;
        }
        
    </style>
</head>
<body>
    <svg viewBoxs="0 0 500 300" class="svgBox">
        <defs>
            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
                <stop  offset="0" style="stop-color: yellow"/>
                <stop  offset="0.5" style="stop-color: #fd8403"/>
                <stop  offset="1" style="stop-color: red"/>
            </linearGradient>
        </defs>
        <text text-anchor="middle" class="box-text" x="110px" y="30%">盖世神功</text>
    </svg>
</body>
</html>

参考链接：
https://segmentfault.com/a/1190000017015544