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文字漸變》