CSS渐变文字生成器
使用 background-clip: text 创建渐变填充文字。选择2或3种颜色和方向，实时预览效果，一键复制可直接使用的CSS代码。
渐变文字
关于CSS渐变文字生成器
渐变文字通过将渐变绘制到文字背景上，再用 background-clip: text（及带前缀的 -webkit-background-clip: text）裁剪到字形来创建。文字颜色本身通过 -webkit-text-fill-color: transparent 设为透明。本工具生成所有必需的带前缀规则，确保效果在所有现代浏览器中可用。
可控制的属性
- 文字与大小 — 文字内容和字体大小。
- 颜色 — 两个或三个渐变色标。
- 方向 — 线性渐变角度或方向关键字。
- 字重 — 字体粗细（300–900）。
使用方法
- 输入要渐变填充的文字。
- 设置字体大小和字重。
- 选择两种颜色（可选第三种）。
- 选择方向。
- 点击 复制 CSS 并粘贴到样式表中。
常见问题
为什么文字消失了？ 如果忘记设置 -webkit-text-fill-color: transparent（或 color: transparent），渐变会被实色文字遮住。生成的CSS已包含两者。
background-clip: text 是否全平台支持？ 所有现代浏览器通过 -webkit- 前缀支持。Firefox 也支持无前缀版本。
可以给渐变添加动画吗？ 可以 — 配合更大的 background-size 动画 background-position 即可实现流动效果。