如何用CSS3给文字添加渐变 - Web前端

作者：98wpeu发布时间：2026-09-18分类：网页前端技术浏览：15

导读：大家都知道给一个box添加渐变背景很简单，但是如何用css3给文字添加渐变呢，可能有些童鞋就蒙了，用图？当然不是，如果是，那就没分享的必要了，一起来学习下。我们从零开始学习，一共分...

大家都知道给一个box添加渐变背景很简单，但是如何用css3给文字添加渐变呢，可能有些童鞋就蒙了，用图？当然不是，如果是，那就没分享的必要了，一起来学习下。

我们从零开始学习，一共分三步：

第一步: 绘制文本

.text {
text-decoration: none;
display: inline-block;
font-size: 32px;
line-height: 1;
border-radius: 4px;
padding: 16px 32px;
background: #50935D;
color: #FFF;
}

<a href="#" class="text">Web前端之家</a>

看下效果：

第二步: 使用渐变

渐变属性分线性渐变、径向渐变、重复性线性/径向渐变

线性渐变

background: linear-gradient(to right,#79F296 40%, #27AE60 60%);

这个很熟悉吧，如下图：

背景产生了渐变效果

to right 表示渐变方向从右边开始

'#79F296'颜色占据40%, '#27AE60'颜色占据60%

径向渐变

background: radial-gradIEnt(circle, #79F296, #27AE60);

效果如下图：

第三步: 通过背景剪裁属性可以使文字达到渐变效果

实现方式:

.text {
text-decoration: none;
display: inline-block;
font-size: 32px;
line-height: 1;
border-radius: 4px;
padding: 16px 32px;
background: radial-gradient(circle, #79F296, #27AE60);
color: #FFF;
-WEBkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

当然方法不止一种呢，一起来看下另外一种方法：

.text {
text-decoration: none;
display: inline-block;
font-size: 32px;
line-height: 1;
border-radius: 4px;
padding: 16px 32px;
background: radial-gradient(circle, #79F296, #27AE60);
color: transparent;
-webkit-background-clip: text;
}

最后还是帖下完整的DemO代码：

<!DOCtype html>
<HTML lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-eqUIv="X-UA-Compatible" content="ie=Edge">
<title>如何用CSS3给文字添加渐变 - Web前端之家</title>
<style>
.text {
text-decoration: none;
display: inline-block;
font-size: 32px;
line-height: 1;
border-radius: 4px;
padding: 16px 32px;
background: radial-gradient(circle, #79F296, #27AE60);
color: transparent;
-webkit-background-clip: text;
}
</style>
</head>
<body>
<a href="#" class="text">web前端之家</a>
</body>
</html>

最终效果如下图：

关于文字渐变的效果，用的CSS3，难免有兼容性问题。目前在谷歌OK，IE低版本浏览器不支持。

大家可以去尝试下，用在移动端还是不错滴

总结

其实还有其他方法的，比如用JS，记得先前分享过一篇文章：实现基于jQuery立体文字渐变特效

当然，如果大家有更好的方法，也可以分享出来，也可以加QQ群。

标签：如何用文字 Web CSS3

上一篇：分享在JS中异步编程一些方法 - Web前端
下一篇：关于SSL证书免费申请、安装以及https配置的一些经验总结 - Web前端

如何用CSS3给文字添加渐变 - Web前端

总结

相关推荐