如何用CSS为HTML文本添加动态渐变文字效果？

要让文字呈现渐变颜色并保留动画效果，你需要调整CSS属性，把背景渐变“裁剪”到文字区域，具体修改如下：

1. 调整.gradient类的样式，核心是用background-clip: text将渐变限制在文字范围内，配合color: transparent让文字本身透明，露出渐变效果；同时移除不必要的height: 100vh（span是行内元素，不需要占满视口）。
2. 为了兼容webkit内核浏览器（比如Chrome、Safari），需要加上前缀-webkit-background-clip: text。

修改后的完整代码：

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  /* 裁剪背景到文字区域 */
  background-clip: text;
  -webkit-background-clip: text;
  /* 让文字透明，露出背景渐变 */
  color: transparent;
  /* 转为行内块，避免行内元素的排版问题 */
  display: inline-block;
}

<h1 style="text-align: center; font-size: 40px;">Welcome To <span class="gradient"><b>Mnazz Suite</b></span></h1>

这样修改后，文字就会呈现动态渐变的颜色效果，而不是仅背景渐变。

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