CSS 渐变文字生成器

功能

• 线性、径向、锥形三种渐变
• 2–4 个停靠色，每个颜色带可调位置
• 渐变角度可调（线性与锥形都跟着它走）
• 实时文字预览，改一个字或一个颜色都立刻重画
• 同时给出标准与 -webkit- 两条背景裁剪声明
• 能打字就能预览，空输入时给一句占位提示
• 交付代码带 @supports not 的回退写法
• 交付代码带 ::selection 的选中高亮补偿
• 所有计算在浏览器本地完成，不上传任何东西

使用方法

1. 先选渐变类型，调角度
2. 用取色器选起止两色，需要过渡就勾上中间色
3. 在输入框里打字，看预览是否合适
4. 复制下方的 CSS，前缀、回退与补偿写法都在里面

常见问题

为什么我的渐变文字整段不见了？

几乎一定是漏了 `background-clip: text`。这个效果里，文字之所以显示出渐变，是因为背景被裁成了文字的形状；而 `color: transparent` 只是让文字本身透明。两者缺一，要么看不到渐变，要么文字整个消失。本工具把这两条绑定输出，所以从它这里复制走的代码不会出现这种半套配置。另一个可能是不支持裁剪的浏览器 —— 那就用交付代码里的 `@supports not` 回退。

为什么选中文字时高亮看不见？

因为文字本身是透明的，`::selection` 只染到那层透明上，看起来就是没有高亮。补偿办法是在选中态把文字填充色改回可见：交付代码里的 `.gradient-text::selection` 同时设置了 `color` 与 `-webkit-text-fill-color`，后者是 Safari / WebKit 真正读的那一条。

为什么要写 -webkit- 前缀？

`background-clip: text` 至今仍不是所有浏览器都默认认的标准写法，Safari / WebKit 只认 `-webkit-background-clip`。只写标准写法的话，在那些浏览器上裁剪规则整个失效、文字很可能就看不见了。所以两条都给，浏览器各取所需。

渐变文字能用在长段落上吗？

不建议。背景裁剪是对整个元素铺一块渐变再裁，行数一多，渐变会在整块文字区域上拉得很开，每行落到不同的颜色段，读起来很乱；而且可读性会随底色变化大幅波动。它更适合标题、按钮文案、logo 这类短文本。长段落想要强调，用单色或在关键词上加同款效果更稳妥。