🌈CSS 渐变文字生成

怎么做 CSS 渐变文字

1. 输入标题文字，选择字体、字重和字号，预览会按真实尺寸显示。
2. 调渐变：选择线性 / 径向 / 锥形，拖动角度，添加或移动色标；想让渐变流动就打开动画。
3. 复制 CSS；如果需要在 CSS 用不到的地方（邮件、PPT、图标）使用同样效果，可以导出透明背景 PNG。

常见问题

渐变文字的原理是什么？

渐变其实是元素的背景，background-clip: text 把背景裁剪成文字形状，再用 color: transparent（以及 -webkit-text-fill-color: transparent）隐藏纯色填充，背景就透出来了。

会影响无障碍和 SEO 吗？

不会。文字仍然是真实文本，屏幕阅读器和搜索引擎都能正常读取。注意让渐变与页面背景保持足够对比度，正文长段落不建议使用。

为什么有的浏览器里文字看不见？

很老的浏览器不支持 background-clip: text，就会显示成透明文字。可以在透明相关声明前加一条兜底 color，或者把它们包进 @supports (background-clip: text) or (-webkit-background-clip: text)。