文字漸層色處理

CSS

發布日期: 2023-12-28

實作專案時，遇到 UI 設計以漸層色作為文字的顏色。

文字顏色為漸層色

本來以為只要需要將 color 寫入 linear-gradient 即可完成，卻意外發現無法使用此做法將顏色套上。

/* 此方法無法套上漸層色 */
.text {
  color: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}

執行結果

🌿 解法

搜尋資料後，找到的解法為將背景先設為漸層色後，利用 background-clip，將背景色變成文字的前景色，最後隱藏文字本身的顏色。

🌿 做法

模板

<h1>基本資料</h1>

1. 將背景設為漸層色

h1 {
  /* 設定背景漸層色 */
  background: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);
}

設定背景漸層色

2. 將背景裁切模式設定為文字

background-clip: text 指的是將區塊内的文字作為裁切的範圍，文字以外的區域都會被裁切掉

h1 {
  /* 設定背景漸層色 */
  background: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);

  /* 背景裁剪為文字的前景色 */
  background-clip: text;
  -webkit-background-clip: text;
}

背景裁剪為文字的前景色

3. 將文字顏色設為透明

h1 {
  /* 設定背景漸層色 */
  background: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);
  
  /* 背景裁剪為文字的前景色 */
  background-clip: text;
  -webkit-background-clip: text;
  
  /* 文字顏色設定透明 */
  color: transparent;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}