渐变文字生成器（CSS）

渐变文字生成器（CSS）: 用途

渐变文字标题在首页和落地页上非常醒目，只需 CSS 即可实现：渐变作为文字的背景，background-clip: text 把背景裁剪成字形。

生成器会输出带 -webkit- 前缀的代码、为不支持的浏览器准备的备用颜色、适配 Windows 高对比度模式的设置，还可以选择渐变动画，并且对希望减少动态效果的用户自动停止。预览会显示标题在浅色和深色背景下的效果。

使用方法

1. 输入文字，选择字体和大小。
2. 选择颜色和角度。
3. 复制 CSS，并把类名应用到标题上。

使用场景

• 首页标题。
• 价格或行动号召的强调。
• 文字徽标。

常见问题

渐变文字是如何实现的？

渐变是元素的背景，background-clip: text 把背景裁剪成文字形状；文字颜色设为透明，背景才能显示出来。适用于任何字体，文字仍然可以选中，屏幕阅读器也能读取。

需要 -webkit- 前缀吗？

代码同时包含带 -webkit- 前缀和不带前缀的 background-clip，因为稍旧的浏览器只支持带前缀的写法。如果都不支持，就会显示备用颜色。

可以用在段落上吗？

可以，但最好只用于标题和简短的强调内容。在连续的正文中，渐变会让阅读疲劳，较浅的部分还可能与背景对比不足。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具