你可能对css的渐变有所了解，比如linear-gradient、radial-gradient。但是并没有遇到过合适的使用场景，本文就来说一个 文字颜色渐变 的例子，就是 linear-gradient 的一个很优雅的使用案例。先看下效果 【css gradient文字渐变】
文章图片
贴上代码 页面结构：
A Deep CSS Dive Into Radial And Conic Gradientscss样式：
body {
background-color: #0e2730;
}
:root {
--rainbow-gradient: linear-gradient(-90deg,#adfbda 0,#35c3ff 30%,#fda399 50%,#76d880 70%,#ebf38b 90%,#adfbda 100%);
}
.article-header--title {
background-image: var(--rainbow-gradient,#fff);
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
filter: drop-shadow(0 0 2rem #000);
text-shadow: none!important;
}
在线演示地址
分析 比较关键的部分就是在background-image中用到了linear-gradient，并且需要background-clip: text。
