CSS 渐变文字生成器

渐变文字的做法是：把渐变画成元素的背景，用 background-clip: text 把背景裁剪成字形，再把文字颜色设为透明，让渐变透出来。这个生成器会写出带有部分浏览器仍需要的 -webkit- 前缀的规则，用 @supports 包起来，让不支持的浏览器回退到纯色，并在您自己的浏览器中渲染结果。

使用方法

1. 输入文字，并选择两到八个渐变颜色（每行一个，位置可选）。
2. 设置角度、字号、字重和字体。
3. 保持勾选“适应文字宽度”，这样较短的标题也能显示完整的渐变。
4. 复制 CSS 和 HTML，并检查备用颜色的对比度。

计算公式

background-image: linear-gradient(<角度>, <颜色>); background-clip: text; -webkit-text-fill-color: transparent;

渐变的尺寸与元素盒子一致，所以在占满整行的标题上，文字后面只有渐变的一部分——display: inline-block 会把盒子缩到文字大小。除非您另选颜色，备用颜色就是第一个渐变颜色。

示例

默认设置生成一个从珊瑚色到桃色的标题：linear-gradient(90deg, #ff7e5f, #feb47b) 裁剪到 64 px、字重 800 的文字上，@supports 之外用 color: #ff7e5f 作备用颜色。这个备用颜色在白底上只有 2.49:1，连 WCAG 对大号文字要求的 3:1 都达不到，所以当标题承载重要信息时，请选更深的颜色。