CSS實現好看的文字漸變

晨光浅夏發表於2024-08-23
CSS

在 CSS 中，可以使用以下幾種方法來實現文字漸變效果：

使用background-image、-webkit-background-clip和-webkit-text-fill-color屬性：這是一種比較常見的方法，適用於大多數瀏覽器。首先，使用background-image屬性設定一個漸變背景，然後使用-webkit-background-clip屬性將背景裁剪為文字區域，最後使用-webkit-text-fill-color屬性將文字顏色設定為透明，即可實現文字漸變效果。示例程式碼如下：

span {
  font-size: 24px;
  font-weight: bold;
  color: transparent;
  background-image: -webkit-linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  -webkit-background-clip: text;
}

使用mask-image屬性：該方法也適用於大多數瀏覽器。透過mask-image屬性為文字設定一個漸變遮罩，從而實現文字漸變效果。示例程式碼如下：

span {
  font-size: 24px;
  font-weight: bold;
  color: red;
  mask-image: -webkit-linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

使用SVG影像：這種方法需要先建立一個包含漸變效果的SVG影像，然後在 CSS 中透過fill屬性將其應用到文字上。該方法相容性較好，但可能會增加頁面的載入時間。示例程式碼如下：

.gradient-text-three {
  fill: url(#SVGID_1_);
  font-size: 40px;
  font-weight: bold;
}
<svg viewBox="0 0 500 300" class="svgBox">
  <defs>
    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
      <stop offset="0" stop-color="red" />
      <stop offset="0.33" stop-color="orange" />
      <stop offset="0.66" stop-color="yellow" />
      <stop offset="1" stop-color="green" />
    </linearGradient>
  </defs>
</svg>

使用linearGradient和fill屬性：該方法適用於支援CSS3的瀏覽器。透過linearGradient和fill屬性直接在文字上應用漸變效果。示例程式碼如下：

.gradient-text {
  fill: linear-gradient(to bottom, red, yellow, green);
  font-size: 40px;
  font-weight: bold;
}

熟練使用之後便可以：

相關文章