TEXT EFFECT
流动渐变文字Animated Gradient Text
渐变色带在文字内部横向流动。Magic UI 的 animated-gradient-text / aurora-text 都是它的变体。
效果预览
Gradient
适合用在哪
品牌主标、AI 产品名、强调性的关键词。整页建议不超过两处，否则会互相抢注意力。
容易踩的坑
- 渐变中浅色段在白底上对比度低于 3:1，标题局部会「消失」。
- background-clip:text 不支持时未设回退色，文字变成透明不可见。
- 选中文本时透明文字配渐变背景，选区高亮会显示异常。
设计提示词 · Prompt
流动渐变文字（Animated Gradient Text）：文本设 background:linear-gradient(90deg, 主色, 高亮色, 次色, 主色) 并把 background-size 放大到 280% 100%；用 -webkit-background-clip:text（加标准 background-clip:text）与 color:transparent 让文字成为渐变遮罩。动画只改 background-position 从 0 到 -280% 0，线性 4.2s 无限循环。字号 40-72px、字重 800、字距 -0.04em。为确保浅色主题下可读，渐变两端色值亮度差异不要太大。
Animated Gradient Text: give the text background:linear-gradient(90deg, primary color, highlight color, secondary color, primary color) and enlarge background-size to 280% 100%; use -webkit-background-clip:text (plus the standard background-clip:text) with color:transparent so the text becomes a gradient mask. The animation only changes background-position from 0 to -280% 0, linear 4.2s, infinite. Font size 40-72px, font weight 800, letter-spacing -0.04em. To keep it readable on light themes, avoid too large a luminance difference between the two ends of the gradient.
常见搭配
同一页面里经常和「流动渐变文字」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center"> <div class="tx-grad">Gradient</div> </div>