使用 CSS background-clip 和 text-fill-color (最推荐)
这是目前实现文字渐变效果最主流、最灵活的方法，它的原理是：
（图片来源网络，侵删）
background: 给文字设置一个渐变的背景。background-clip: text;: 将这个背景的裁剪区域限制在文字内部，这样，文字之外的部分就看不见背景了。-webkit-text-fill-color: transparent;: 将文字本身的填充颜色设置为透明，这样就能透出下面的渐变背景。
注意：background-clip: text; 和 -webkit-text-fill-color: transparent; 的 -webkit- 前缀在某些浏览器（如 Safari）中是必需的，但现代浏览器（Chrome, Firefox, Edge）已经支持不带前缀的版本，为了兼容性，建议都写上。
示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">CSS 文字渐变效果</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: 'Arial', sans-serif;
}
.gradient-text {
/* 1. 定义文字大小和粗细 */
font-size: 5rem;
font-weight: bold;
/* 2. 定义渐变背景 */
background: linear-gradient(to right, #ff7e5f, #feb47b);
/* 3. 将背景裁剪到文字内部 */
-webkit-background-clip: text;
background-clip: text;
/* 4. 将文字颜色设置为透明，以显示背景 */
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h1 class="gradient-text">你好，渐变世界！</h1>
</body>
</html>
代码解析：
background: linear-gradient(to right, #ff7e5f, #feb47b);: 创建了一个从左到右的线性渐变，颜色从#ff7e5f过渡到#feb47b，你也可以使用radial-gradient(径向渐变) 或其他渐变函数。-webkit-background-clip: text; background-clip: text;: 这是实现效果的核心，确保背景只显示在文字形状内。-webkit-text-fill-color: transparent;: 这是让文字“消失”，从而露出渐变背景的关键。
使用 SVG <text> 元素
这种方法将文字渲染在 SVG 图像中，利用 SVG 的 fill 属性直接支持渐变，它的优点是文字可以像图片一样被选中、复制，并且兼容性非常好，甚至在一些不支持 background-clip 的旧浏览器中也能工作。
示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">SVG 文字渐变效果</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: 'Arial', sans-serif;
}
svg {
font-size: 5rem;
font-weight: bold;
}
</style>
</head>
<body>
<!--
1. 定义一个 <defs> 区域，用于存放可重用的渐变定义
2. 使用 <linearGradient> 定义渐变，并给它一个 id (如 "myGradient")
3. 在 <text> 元素的 fill 属性中引用这个 id
-->
<svg width="600" height="150" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#ff7e5f;stop-opacity:1" />
<stop offset="100%" style="stop-color:#feb47b;stop-opacity:1" />
</linearGradient>
</defs>
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="url(#myGradient)">
SVG 渐变文字
</text>
</svg>
</body>
</html>
代码解析：
（图片来源网络，侵删）
<defs>: SVG 中的“定义”部分，用于存放不会直接显示在画面上的元素，比如渐变、滤镜等。<linearGradient>: 定义线性渐变。id="myGradient": 给这个渐变命名，方便后续引用。<stop>: 定义渐变中的颜色断点。
<text>: SVG 中的文字元素。fill="url(#myGradient)": 这是关键，它告诉浏览器使用id为myGradient的渐变来填充这个文字。
使用 filter: drop-shadow() (特殊效果)
这个方法并不是真正的文字渐变,而是给文字添加了一个带有渐变色的阴影，它适用于制作一些特殊效果，比如霓虹灯、发光效果，而不是将文字本身染成渐变色。
示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Drop-shadow 文字渐变效果</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #222;
font-family: 'Arial', sans-serif;
}
.shadow-text {
font-size: 5rem;
font-weight: bold;
/* 文字本身是白色，但看不见，因为被阴影覆盖了 */
color: white;
/* 使用多个阴影叠加，模拟渐变效果 */
filter: drop-shadow(0.1em 0.1em 0 #ff7e5f)
drop-shadow(0.2em 0.2em 0 #feb47b)
drop-shadow(0.3em 0.3em 0 #ff7e5f);
}
</style>
</head>
<body>
<h1 class="shadow-text">霓虹渐变效果</h1>
</body>
</html>
代码解析：
filter: drop-shadow(...): CSS 滤镜函数，用于添加阴影。- 通过连续使用多个
drop-shadow，并让它们的偏移量和颜色逐渐变化，可以模拟出一种类似渐变的发光效果。
总结与对比
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
background-clip |
最常用、最灵活，易于实现各种渐变（线性、径向、角度），性能好。 | 在极少数非常旧的浏览器中可能需要前缀，但现代浏览器支持完美。 | 绝大多数情况下的首选、Logo、装饰性文字等。 |
SVG <text> |
兼容性极佳，文字可被正常选中复制，是矢量图形，不会失真。 | 代码稍显复杂，需要引入 <svg> 标签，对不熟悉 SVG 的人来说有学习成本。 |
需要高兼容性、文字需要被用户复制、或者作为 SVG 图标的一部分时。 |
filter: drop-shadow |
实现特殊效果（如霓虹灯、发光）非常方便。 | 不是真正的文字渐变，而是阴影效果，可能影响文字可读性。 | 当你想要制作发光、阴影等特效，而不是改变文字本身颜色时。 |
最终建议：
对于 99% 的需求，直接使用 方法一 (background-clip) 是最简单、最现代、效果最好的选择，如果你在做的是一个需要兼容到非常古老的浏览器，或者文字内容需要被用户精确复制的项目，那么可以考虑 方法二 (SVG)。
