TYPOGRAPHY
渐变文字Gradient Text
background-clip:text 让文字内部流淌渐变色，一个属性拯救一整句标题。
效果预览
让创作自带流量
流动的渐变文字 →
垂直深浅变体
适合用在哪
标题关键词强调、数字、Logo 字、按钮文字。
容易踩的坑
- 渐变两端色相差太大，中段某处与背景对比度跌破 4.5:1，部分文字发虚。
- 流动渐变无限循环且未响应 prefers-reduced-motion，持续重绘消耗 GPU。
- Windows 高对比度模式下 color:transparent 会让文字彻底消失。
设计提示词 · Prompt
渐变文字（Gradient Text）：background:linear-gradient(135deg,色A,色B) + -webkit-background-clip:text + color:transparent（加 -webkit-text-fill-color:transparent 兼容）。三个变体：横向双色（品牌 A→B）、垂直深浅（上深下浅，深色文字的高级版）、流动渐变（background-size:200% + background-position 动画，颜色缓缓流动）。只对 1-3 个关键词使用，整句渐变会廉价。深色背景上用亮色渐变，浅色背景上用深色系渐变保证对比度。不支持时优雅降级为纯色（用 @supports）。
Gradient Text: background:linear-gradient(135deg,colorA,colorB) + -webkit-background-clip:text + color:transparent (add -webkit-text-fill-color:transparent for compatibility). Three variants: horizontal two-color (brand A→B), vertical dark-to-light (darker top, lighter bottom — a premium take on dark text), and flowing gradient (background-size:200% + animated background-position so the colors slowly flow). Apply only to 1-3 key words; gradient on a whole sentence looks cheap. Use light gradients on dark backgrounds and dark-family gradients on light backgrounds to ensure contrast. Degrade gracefully to a solid color where unsupported (using @supports).
常见搭配
同一页面里经常和「渐变文字」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-gradtext"> <span class="d-gradtext__t">让创作自带流量</span> <span class="d-gradtext__t d-gradtext__t--anim">流动的渐变文字 →</span> <span class="d-gradtext__t d-gradtext__t--vert">垂直深浅变体</span> </div>