渐变文字 5 种特效（线性/彩虹流动/玻璃质感 CSS 源码）

效果演示（真实可交互）

下方 5 行文字分别演示不同的渐变着色方式，其中彩虹流动渐变带有循环动画。悬停文字会轻微放大加亮，方便查看效果。

完整代码

HTML 结构非常简单，每个文字元素一个类名：

<p class="g-txt g-linear">01 · 经典线性渐变</p>
<p class="g-txt g-rainbow">02 · 彩虹流动渐变</p>
<p class="g-txt g-split">03 · 双色对比渐变</p>
<p class="g-txt g-glass">04 · 玻璃质感渐变</p>
<p class="g-txt g-fire">05 · 火焰熔岩渐变</p>

核心 CSS：渐变文字的关键是把背景裁切到文字上，即 background-clip: text + -webkit-text-fill-color: transparent：

.g-txt {
  font-size: 34px;
  font-weight: 800;
  background: linear-gradient(90deg, #6c8cff, #b388ff);
  -webkit-background-clip: text;   /* 把背景裁剪成文字形状 */
  background-clip: text;
  -webkit-text-fill-color: transparent;  /* 文字本身透明，露出背景 */
  color: transparent;              /* 标准写法兜底 */
}

/* 彩虹流动：背景放大 300% 并循环移动 */
.g-rainbow {
  background: linear-gradient(90deg, #ff6b6b, #ffa94d, #ffe066, #51cf66, #339af0, #b388ff, #ff6b6b);
  background-size: 300% 100%;
  animation: gradmove 4s linear infinite;
}
@keyframes gradmove { to { background-position: 300% 0; } }

/* 双色对比：用 50% 色标一分为二 */
.g-split {
  background: linear-gradient(90deg, #43e97b 0%, #38f9d7 50%, #6c8cff 50%, #b388ff 100%);
}

参数说明

兼容性与性能

• background-clip: text 需要加 -webkit- 前缀，Chrome 4+ / Safari 5.1+ / Firefox 49+ 支持，IE 全系不支持
• 动画只移动背景位置，性能开销小，适合标题等少量文字
• 注意透明文字无法与 text-shadow 的填充色同时使用（阴影会盖在渐变上），需要发光时建议用两层叠加或滤镜
• 渐变文字不适合超长段落，中文长文建议只用于标题和品牌词

常见问题

Q: 复制文字时变成透明看不见怎么办？ 这是 text-fill-color: transparent 的正常表现，不影响实际文本内容，可以放心用于 SEO 标题。

Q: 想加描边和渐变同时存在？ 先用 -webkit-text-stroke 描边，再叠加渐变裁剪层，两层结构即可实现渐变描边字。

Q: 渐变文字能加阴影吗？ 直接加会被透明文字穿透，推荐用 filter: drop-shadow()，它会按文字的实际形状投影。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名。