2025年CSS 实现文字渐变

科技前沿 • 2025-02-09 22:59 • 阅读 40

大家好，我是讯享网，很高兴认识大家。

1. 使用 background-clip 实现文字渐变

background-image: linear-gradient(to bottom, #ec428c, #32d1d3); // 背景线性渐变 color: #ffffff; // 兜底颜色，防止文字裁剪不生效 background-clip: text; -webkit-background-clip: text; // 背景被裁减为文字的前景色 -webkit-text-fill-color: transparent; // 文字填充为透明，优先级比color高。

讯享网

可能会出现的问题：

踩坑 1: 线性渐变字体消失

在低端 ios 机型上，出现过线性渐变字体消失的问题，排查发现是因为background-clip 无法 display: flex布局下生效。所以开发过程中务必做好兜底，防止这两种样式出现在同一个 dom 上。

讯享网

踩坑 2: 线性渐变字体在部分 ios 机型上出现一条线

使用这种方式实现线性渐变，在部分 ios 机型上会出现奇怪的线，可以将背景设置为no-repeat，并适当缩小。

讯享网background-repeat: no-repeat; background-size: 98% 98%; background-position: 50% 50%;

2. 使用 -webkit-mask 实现文字渐变

<div class="word" data-text="文字渐变">文字渐变</div>

讯享网.word { 
    position: relative; color: #ec428c; &:after { 
    content: attr(data-text); position: absolute; top: 0; left: 0; z-index: 10; color: #32d1d3; -webkit-mask: linear-gradient(to bottom, transparent, green); white-space: nowrap; } }

2025年CSS 实现文字渐变

1. 使用 background-clip 实现文字渐变

踩坑 1: 线性渐变字体消失

踩坑 2: 线性渐变字体在部分 ios 机型上出现一条线

2. 使用 -webkit-mask 实现文字渐变

相关推荐