如何为文字添加彩虹渐变效果？现有代码失效求助

如何复现上述文字渐变效果？我尝试了以下代码，但文字仅显示为白色：

原代码 #

CSS

h1 {
    background-image: var(--rainbow-gradient,#fff);
    background-size: 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    filter: drop-shadow(0 0 2rem #000);
    text-shadow: none!important;
}

HTML

<H1>Hello world</H1>

问题原因 #

代码中使用了var(--rainbow-gradient,#fff)作为背景图，但CSS变量--rainbow-gradient未定义，浏览器自动 fallback 到默认值#fff白色，导致文字仅显示白色。

修正方案 #

方案1：定义CSS渐变变量

先在全局:root中定义渐变变量，再引用：

:root {
  /* 可根据示例图调整渐变颜色、角度 */
  --rainbow-gradient: linear-gradient(90deg, #ff4d4d, #ffb84d, #ffff4d, #4dff4d, #4dffff, #4d4dff, #b84dff, #ff4dcc);
}

h1 {
  background-image: var(--rainbow-gradient, #fff);
  background-size: 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  filter: drop-shadow(0 0 2rem #000);
  text-shadow: none !important;
}

<h1>Hello world</h1>

方案2：直接使用渐变值

不需要变量的话，直接把渐变写在background-image里：

h1 {
  background-image: linear-gradient(90deg, #ff4d4d, #ffb84d, #ffff4d, #4dff4d, #4dffff, #4d4dff, #b84dff, #ff4dcc);
  background-size: 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  filter: drop-shadow(0 0 2rem #000);
  text-shadow: none !important;
}

<h1>Hello world</h1>

说明 #

-webkit-background-clip: text和-webkit-text-fill-color: transparent是实现文字渐变的核心属性，前者将背景裁剪到文字区域，后者把文字颜色设为透明，让背景渐变透出来。调整渐变的颜色、角度或background-size可以匹配示例图的效果。

内容的提问来源于stack exchange，提问作者sathish kumar