css linear-gradient文字渐变

你可能对css的渐变有所了解，比如linear-gradient、radial-gradient。但是并没有遇到过合适的使用场景，本文就来说一个 文字颜色渐变 的例子，就是 linear-gradient 的一个很优雅的使用案例。

先看下效果

贴上代码

页面结构：

<h1 class="article-header--title">A Deep CSS Dive Into Radial And Conic Gradients</h1>

css样式：

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。

文章首发于 IICOOM-个人博客 《css linear-gradient文字渐变》