文字未显示渐变的最常见原因是漏写 color: transparent，因浏览器默认用实色绘制文字，会覆盖 background-clip: text 设置的渐变；该特性在 Firefox 117+ 及主流浏览器中已稳定支持，但旧版 Safari 不兼容。

直接用 background-clip: text 配合 linear-gradient() 就能实现，但必须加 color: transparent，否则渐变会被文字原始颜色盖住。

为什么文字没显示渐变？

最常见原因是漏写了 color: transparent。浏览器默认会把文字画成实色，哪怕你设置了背景渐变，它也会盖在上面。另外，background-clip: text 在 Firefox 117+ 和 Chrome/Safari/Edge 中已稳定支持，但旧版 Safari（-webkit-background-clip: text。

线性渐变 vs 径向渐变怎么选？

linear-gradient() 更常用，适合标题、按钮等强调方向感的场景；radial-gradient() 适合营造光晕、聚焦效果，比如 logo 文字或徽章文案。

• 水平渐变：background: linear-gradient(to right, #ff7a00, #ff0080)
• 垂直渐变：background: linear-gradient(to bottom, #4facfe, #00f2fe)
• 径向渐变：background: radial-gradient(circle, #4facfe 0%, #00f2fe 100%)

移动端和小字号下容易糊？

这是渲染精度问题，尤其在 iOS Safari 上。解决办法有三个：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

立即学习“前端免费学习笔记（深入）”；

• 加 -webkit-text-stroke: 0.5px transparent，轻微描边可提升边缘锐度
• 避免用太细的字体（font-size 小于 16px 时风险高）
• 禁用亚像素抗锯齿：-webkit-font-smoothing: antialiased（仅限 WebKit）

要不要加降级方案？

要，而且得简单有效。别写一堆 JS 检测，直接用层叠：

.gradient-text {
  color: #333; /* 默认纯色 fallback */
  background: linear-gradient(45deg, #ff7a00, #ff0080);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

不支持 background-clip: text 的浏览器（如 IE 或极老安卓 WebView）会忽略后面两行，直接显示 color: #333 —— 这就是最稳妥的降级。

实际项目里，渐变文字不是“能不能做”，而是“在哪种上下文里稳得住”。字体粗细、容器宽度、是否参与动画、是否被 transform 缩放……这些细节比语法本身更容易翻车。