在网页设计中，渐变色（Gradient）可以为文字、按钮和背景增添现代感和视觉吸引力。今天，我们将学习如何使用 CSS 实现字体渐变色效果，让你的标题和重点文字更加突出！

实现代码

只需几行 CSS，就能让普通文字变成渐变色：

.gradient-text {
  background: linear-gradient(to right, #60a5fa, #67e8f9, #60a5fa);
  -webkit-background-clip: text; /* 兼容 Safari/Chrome */
  background-clip: text;
  color: transparent; /* 隐藏原文字颜色 */
  font-size: 2.5rem;
  font-weight: bold;
}

html：

<h1 class="gradient-text">让你的文字炫彩夺目！</h1>

 

代码解析

1. linear-gradient 定义渐变

to right 表示渐变方向（从左到右），还可以使用：
to left（从右到左）
to top（从下到上）
to bottom right（对角线渐变）
#60a5fa, #67e8f9, #60a5fa 是颜色值，这里实现“蓝→青→蓝”的渐变效果。

2. background-clip: text 关键属性

这个属性让背景仅作用于文字部分，而不是整个元素。

-webkit-background-clip: text 是为了兼容 Safari 和 Chrome（旧版本需要前缀）。

3. color: transparent 隐藏原文字颜色

如果不设置 transparent，文字会显示默认颜色，覆盖渐变效果。