跳到正文

流动渐变文字

Animated Gradient Text

初级网页小程序

标题里最关键的几个字填充一条彩色渐变，渐变还在缓缓地横向流动。AI 产品、SaaS 官网的首屏标题几乎都有这一笔，一句话里一眼就能看到重点。

你可能会说：「官网标题里「能用的产品」这几个字，能不能做成彩色渐变，颜色还慢慢流动？」

效果预览

正在加载演示…

怎么做

  1. 1

    把渐变背景裁成文字的形状

    给关键词加一个渐变背景，再用 background-clip: text 把背景裁成文字的形状，最后把文字本身设成透明，透出来的就是渐变。Safari 需要带 -webkit- 前缀。

    查看代码css
    .gradient-text {
  background-image: linear-gradient(90deg, #6366f1, #ec4899, #f59e0b, #6366f1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
  2. 2

    让渐变流动起来

    把背景拉宽到两倍，再让背景位置从 0 移到 200%，渐变就会横向流动。渐变的首尾颜色要相同（上面例子里首尾都是 #6366f1），循环时才不会出现一道硬接缝。

    查看代码css
    .gradient-text {
  background-size: 200% auto;
  animation: gradient-flow 6s linear infinite;
}
@keyframes gradient-flow {
  to { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-text { animation: none; }
}
  3. 3

    只给关键词，别给整段

    渐变文字只用在标题里的几个关键词上。注意文字被选中复制时没有影响，但如果背景不支持裁切，透明文字会消失，可以用 @supports 兜底成纯色。

    查看代码html
    <h1>把想法变成 <span class="gradient-text">能用的产品</span></h1>

<style>
  @supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .gradient-text { color: #6366f1; -webkit-text-fill-color: currentColor; }
  }
</style>

适合放在哪

适合用

  • 官网首屏标题里的关键词。
  • AI 功能的名称、标签，比如「AI 生成」。
  • 活动页的大标题。

不适合用

  • 正文、长段落别用渐变文字；难读，也失去了强调的意义。
  • 浅色背景上用浅色渐变（如黄到白），文字会看不清；先检查对比度。
  • 一页里到处都是渐变文字时，就没有重点了；只留一两处。

让 AI 帮你做

请给【标题里的关键词，如：首页 Hero 主标题的后半句】加上流动渐变文字效果。先阅读标题组件和项目的颜色变量，确认背景色和品牌色。要求：关键词单独包一层，用 linear-gradient 背景加 background-clip: text（带 -webkit- 前缀）和透明文字色；渐变首尾颜色相同、背景宽 200%，背景位置循环移动约 6 秒一轮；用 @supports 给不支持的浏览器兜底成纯色；开启减少动效时停止流动；检查文字与背景的对比度。不改无关代码。最后说明在 Safari 和深浅两种主题下怎么检查效果。

用到的知识

渐变关键帧对比度排版