mask-image方法实现文字渐变不成功

使用网上提供的mask-image方法实现文字渐变不成功，vscode一直报错

<style type="text/css">
    .gradient-text-two{

    color:red;
    display: inline-block;
    }

    .gradient-text-two[data-content]::after{

        content:attr(data-content);

        display: block;

        position:absolute;

        color:yellow;

        left:0;

        top:0;

        z-index:2;

        -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
    }
    style>
head>
<body>
    <div class="gradient-text-two">我是渐变文字div>
body>

img


<style type="text/css">
    .gradient-text-two{

    display: inline-block;
    }

    .gradient-text-two[data-content]::after{
        content:attr(data-content);
        display: block;
        position:absolute;
        color: red;
        left:0;
        top:0;
        z-index:2;
        -webkit-mask-image: linear-gradient(red,rgba(0, 0, 255, 0));
    }
    </style>
</head>
<body>
    <div class="gradient-text-two" data-content="我是渐变文字"></div>
</body>