渐变文字 | wjs-css-effects

渐变文字

关键点

渐变文字通过 background-clip: text 将背景裁剪为文字形状
同时设置 -webkit-text-fill-color: transparent，让文字本身透明，透出背景渐变
背景可以是线性渐变、径向渐变，甚至是动画的渐变背景，效果多样
兼容性较好，但主要依赖 WebKit 内核，Firefox 较新版本也已支持
可配合 background-size 和 animation 实现渐变流动的动态文字效果

效果说明

文字呈现渐变色彩并持续流动。把渐变设为元素的 background，再用 background-clip: text 把背景裁剪到文字范围，配合 color: transparent 让文字本身透明，露出背后的渐变。最后用 background-position 动画让渐变流动。这是标题、Logo 文字的常用美化手法。