開發者工具 / 031
文字漸層產生器
替文字建立線性、放射或圓錐漸層，即時預覽並產生可直接使用的 CSS 程式碼。
W 工具箱
預設組合
漸層類型
色彩停駐點
CSS
background: linear-gradient(90deg, #ff6b6b 0%, #f7b733 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; 四行都要一起用。-webkit-background-clip 不能省—— Safari 到現在仍然只認前綴版本，少了那行文字會整片透明看不見。
為什麼做這個
文字漸層通常需要搭配 background-clip 與透明文字等設定，少一行就可能看不到效果。這個工具把相關 CSS 一次組好，並用實際文字即時預覽。
這個工具怎麼用
文字漸層的原理是「把漸層畫成背景，再用文字的形狀把背景裁出來」。所以它不是幫文字上色，而是讓文字變成一個遮罩——這也是為什麼必須把 color 設成 transparent，否則文字本身的顏色會蓋住背後的漸層。
輸出的 CSS 會包含漸層背景、文字裁切與透明文字等設定。為了兼顧不同瀏覽器，建議保留產生器輸出的標準屬性與 WebKit 前綴，不要只複製其中一行。
三種漸層適合的場合不同：線性最常用，適合標題；放射會從中心往外擴散，字少的時候效果明顯；圓錐則像色相環繞一圈，適合做出彩虹或金屬感。角度滑桿在線性是漸層方向，在圓錐則是起始位置，放射沒有角度概念所以會隱藏。
要注意可讀性。漸層文字在小字級下很難讀，特別是顏色對比低的組合，建議只用在標題或短句。另外漸層文字無法用 `text-shadow` 加陰影（陰影會畫在透明的文字上），需要外框效果的話得改用其他做法。
常見問題
為什麼複製的 CSS 貼上去文字不見了？
最常見的原因是漏了 `-webkit-background-clip: text` 那一行。Safari 與部分 WebKit 瀏覽器只認前綴版本，少了它會變成「文字透明但背景沒被裁切」，結果就是什麼都看不到。四行請一起複製，不要挑著用。
為什麼我的漸層看起來是一整塊色塊？
代表 `background-clip: text` 沒有生效，背景仍然填滿整個元素。檢查兩件事：元素是不是 `display: inline` 導致背景範圍不對（改成 `inline-block` 試試），以及 `color` 有沒有設成 `transparent`。
漸層文字可以加陰影嗎？
`text-shadow` 沒有用，因為陰影會依文字本身繪製，而文字已經是透明的。需要陰影或外框的話，實務上的做法是複製一份同樣的文字疊在底層當作陰影，或改用 SVG 的文字加濾鏡。
跟 CSS 漸層產生器差在哪？
那個工具產生的是元素背景的漸層（一塊色塊），這個是把漸層套在文字上。兩者的漸層語法共用，但文字漸層必須額外加上 background-clip 與透明文字色那幾行，少任何一行都不會有效果。
所有瀏覽器都支援嗎？
現代瀏覽器都支援。`background-clip: text` 的標準寫法已被廣泛實作，加上 `-webkit-` 前綴則能涵蓋 Safari 與較舊的 WebKit 版本。需要照顧非常舊的瀏覽器時，可以先設一個純色 `color` 當作退路，再讓支援的瀏覽器覆寫。