TailwindCSS 背景與漸層：bg-linear、bg-radial、mask 遮罩全解 | TailwindCSS 完整教學

上一篇替版面上好了「色」，這一篇把單一顏色延伸成「面」與「光」。TailwindCSS 的背景工具組涵蓋背景色、背景圖，以及最迷人的漸層系統。v4 把漸層語法整個翻新——bg-linear-to-r（線性）、bg-radial（徑向）、bg-conic（錐形）三種漸層搭配 from／via／to 色標與位置百分比，還新增了 bg-linear-45 角度語法與一整組 mask 遮罩工具。這一篇會帶你玩透背景與漸層，讓版面從「有顏色」進化到「有質感」。

前言

上一篇 《色彩系統》 我們把 Tailwind 的調色盤講透了——22 種色相、50–950 色階、text／bg／border／ring 四大上色工具，以及 v4 改用 OKLCH 帶來的乾淨色彩。但那些都停留在「一格一格的純色」。真實的作品裡，背景往往不是死板的單色：Hero 區塊的天空漸層、按鈕上的漸變光澤、卡片邊緣的柔和淡出、長圖底部的漸隱⋯⋯這些「面」與「光」的質感，正是這一篇 背景與漸層 要交給你的工具。

用一個生活化的類比來理解背景系統：想像你在為一面牆做裝潢。 最基礎的是「刷一層純色油漆」（bg-* 背景色）；進階一點是「貼一張壁紙」（bg-image 背景圖），還能決定壁紙要鋪滿、置中、重複還是固定（bg-cover／bg-center／bg-repeat／bg-fixed）；最有巧思的則是「漆一道由淺到深的漸變」（漸層），甚至在牆上「開一扇形狀特殊的窗」，只讓部分畫面透出來（mask 遮罩）。Tailwind 把這一整套裝潢工法都做成了 class，你不用碰 CSS 的 background-image 與 mask-image 語法，就能組出專業質感。

而 TailwindCSS v4 是本系列的預設版本，它對漸層做了近年最大的一次改版：命名從 bg-gradient-to-* 改成語義更清楚的 bg-linear-to-*，並新增徑向、錐形漸層與角度語法，還帶來全新的 mask-* 遮罩。本篇你將學到：

• 背景色與背景圖：bg-{色相}-{色階}、bg-transparent／bg-current，以及背景圖的 bg-cover／bg-center／bg-no-repeat／bg-fixed
• v4 三種漸層：bg-linear-to-r（線性）、bg-radial（徑向）、bg-conic（錐形），搭配 from／via／to 色標
• 角度與色標位置：bg-linear-45 指定角度、from-10%／via-50%／to-90% 控制顏色分佈、/oklch 切換插值色彩空間
• v4 專屬 mask 遮罩：mask-b-from-*／mask-radial／mask-linear-*，用純 class 做邊緣淡出與羽化
• v3 → v4 差異：bg-gradient-to-* 改名的來龍去脈與遷移對照

本系列以 TailwindCSS v4 為預設版本，範例皆可直接執行。凡涉及 v3 差異之處，我會特別標註。

核心概念

背景工具的三大類

Tailwind 的背景 utility 依「控制什麼」分成三大類：背景色（一層純色）、背景圖（含漸層與圖片，以及尺寸／位置／重複／固定的擺放控制）、遮罩（決定背景／元素哪裡顯示哪裡淡出）。下表先建立全景：

不用一次記完。核心心智模型只有一句話：背景色是「一層純色」，漸層與圖片同屬 background-image（所以能疊在背景色之上），而尺寸／位置／重複／固定是用來「擺放」那張背景圖的四個旋鈕。 遮罩則是站在更外一層，決定整個元素最終哪裡透出來。

v4 漸層的運作原理：方向 + 色標

Tailwind 的漸層由兩件事組成，理解這一點就掌握了整套系統：方向（漸層往哪走）與色標（用哪些顏色、怎麼分佈）。

方向用 bg-linear-*／bg-radial／bg-conic 決定。以線性漸層為例，v4 提供八個固定方向與任意角度：

bg-linear-to-r（向右）      bg-linear-to-br（右下）     bg-linear-45（45 度角）
────────────────           ─────────────────           ────────────────
from   →   to               from ↘                      ╱ 沿 45 度方向
████▓▓▒▒░░░░░░░░           ████▓▓▒▒░░░░░░              from → to（可自訂角度）

色標用 from-*（起始色）、via-*（中間色，可省略）、to-*（結束色）決定，這三顆就是「顏色 + 色階」，和上色工具完全一致：

from-blue-500  via-purple-500  to-pink-500：
────────────────────────────────────────────
████████████████████████████████████████████
  blue    →     purple     →     pink
  0%             50%              100%

搭配位置百分比（from-10%、via-50%、to-90%）就能微調顏色的分佈疏密。而 v4 漸層預設以 oklab 色彩空間插值（承襲上一篇講的 OKLCH 家族），過渡不再出現灰濁中間帶；需要時可用 /oklch、/srgb、/hsl、/longer 等修飾符切換插值方式。

值得特別點出的是：漸層在底層其實是 background-image 而非 background-color。這解釋了兩件事——其一，你可以在同一個元素上同時寫 bg-white 與漸層，背景色會墊在漸層底下（漸層若含透明色標就會透出底色）；其二，因為它是 background-image，所以能被 bg-cover／bg-center 等擺放旋鈕影響，也能被 bg-clip-text 裁切成文字形狀（漸層文字正是靠這一點）。把「漸層 = 一種特殊的背景圖」記在心裡，很多行為就都說得通了。

v3 → v4 漸層命名對照

因為這是 v4 對背景系統最大的一次改動，值得用一張表把新舊對照講清楚，方便你遷移舊專案：

一句話總結遷移動作：把 bg-gradient-to- 這段字全域替換成 bg-linear-to-，其餘 from／via／to 都不用動。 官方為了平滑過渡保留了對舊寫法的相容，但新程式碼一律建議用 v4 命名，才吃得到角度、徑向、錐形與遮罩這些新能力。

三個關鍵術語

• 線性漸層（linear）：顏色沿一條直線方向漸變，最常用。v4 寫 bg-linear-to-r（v3 是 bg-gradient-to-r）。
• 徑向漸層（radial）：顏色由中心點向外呈圓形擴散，適合做光暈、聚光效果。v4 寫 bg-radial，帶位置用 bg-radial-[at_50%_75%]。
• 錐形漸層（conic）：顏色繞著中心旋轉一圈漸變，適合做色相環、圓餅圖式的裝飾。v4 寫 bg-conic，帶起始角度用 bg-conic-180。

再補一個常被混淆的觀念：背景色與背景圖是「兩層」，可以並存。 bg-blue-500（背景色）與 bg-linear-to-r from-...（背景圖／漸層）寫在同一個元素上並不衝突，漸層蓋在藍底之上，若漸層某段是 to-transparent，藍底就會從那段透出來。而 bg-none 是專門用來「移除背景圖」（漸層或圖片）的 class，它不影響背景色——這在做響應式、想在大螢幕拿掉漸層時很好用（bg-linear-to-r md:bg-none）。

實作範例

理論看完，我們用幾個高頻範例把背景與漸層串起來。以下都是完整的 HTML + Tailwind，可直接貼進頁面觀察效果。

範例一：漸層按鈕（線性漸層 + hover）

最日常的漸層用途就是替按鈕加一道光澤。訣竅是用兩個相近色相做線性漸層，hover 時反轉方向或加深：

<!-- 藍→紫漸層按鈕：向右線性漸層，hover 時整體加亮 -->
<button class="rounded-lg px-5 py-2.5 font-medium text-white shadow-md transition
               bg-linear-to-r from-indigo-500 to-purple-600
               hover:from-indigo-400 hover:to-purple-500">
  漸層按鈕
</button>

<!-- 三色漸層按鈕：加入 via 中間色，色彩更豐富 -->
<button class="rounded-lg px-5 py-2.5 font-medium text-white shadow-md transition
               bg-linear-to-r from-cyan-500 via-blue-500 to-purple-600
               hover:brightness-110">
  三色漸層
</button>

<!-- 指定角度：135 度斜向漸層 -->
<button class="rounded-lg px-5 py-2.5 font-medium text-white shadow-md
               bg-linear-135 from-pink-500 to-rose-500">
  斜向漸層
</button>

三顆按鈕示範了漸層的核心用法。第一顆用 bg-linear-to-r 指定向右方向，from-indigo-500 to-purple-600 給出起訖兩色，hover 時把兩個色標都調亮一階（from-indigo-400 hover:to-purple-500）產生互動回饋。第二顆多加了 via-blue-500 中間色，讓漸層跨越三個顏色、層次更豐富。第三顆用 bg-linear-135 直接指定 135 度角——這是 v4 的角度語法，讓你跳脫八個固定方向的限制。

v3 提醒：以上 bg-linear-to-r 在 v3 要寫成 bg-gradient-to-r，且 v3 沒有 bg-linear-135 這種角度語法。從 v3 遷移時，把所有 bg-gradient-to-* 全域替換成 bg-linear-to-* 即可。

範例二：Hero 背景（徑向光暈 + 疊層）

Hero 區塊是漸層的主戰場。這裡示範一個深色 Hero，用線性漸層打底、再疊上兩坨徑向光暈製造氛圍：

<!-- 全版 Hero：斜向線性漸層打底 -->
<section class="relative flex min-h-screen items-center justify-center overflow-hidden
                bg-linear-to-br from-slate-900 via-purple-950 to-slate-900">

  <!-- 徑向光暈裝飾：由中心向外淡出的圓形色塊 -->
  <div class="absolute left-1/4 top-1/4 size-96 rounded-full blur-3xl
              bg-radial from-purple-500/30 to-transparent"></div>
  <div class="absolute bottom-1/4 right-1/4 size-72 rounded-full blur-3xl
              bg-radial from-cyan-500/20 to-transparent"></div>

  <!-- 內容 -->
  <div class="relative px-6 text-center text-white">
    <h1 class="mb-4 text-6xl font-bold">Hello, Gradient</h1>
    <p class="mx-auto max-w-xl text-lg text-white/70">
      線性漸層打底、徑向光暈點綴的現代化英雄區塊
    </p>
  </div>
</section>

這個 Hero 疊了三層背景。底層用 bg-linear-to-br（右下斜向）的深色線性漸層 from-slate-900 via-purple-950 to-slate-900，兩端同色、中間偏紫，做出微妙的中央光感。中層是兩個 bg-radial 徑向漸層圓，from-purple-500/30 to-transparent 讓顏色從中心的半透明紫向外淡到全透明，再加 blur-3xl 模糊成柔和光暈——這是 v4 徑向漸層最實用的場景。上層是白色文字，用 text-white/70 的透明度速記讓副標稍微退到背景裡。三層疊起來，就是設計稿裡常見的「深色科技感 Hero」。

範例三：漸層文字與色標位置

漸層不只用在背景，配合 bg-clip-text 還能做漸層文字；而 from-10%／via-50%／to-90% 則讓你精確控制顏色分佈：

<!-- 漸層文字：背景漸層裁切到文字形狀 -->
<h1 class="text-5xl font-extrabold text-transparent
           bg-linear-to-r from-blue-600 via-purple-600 to-pink-600
           bg-clip-text">
  漸層標題文字
</h1>

<!-- 色標位置控制：讓紅色佔比小、綠色早早收尾 -->
<div class="h-16 w-full rounded-lg
            bg-linear-to-r from-red-500 from-10% via-yellow-500 via-50% to-green-500 to-90%">
</div>

<!-- 切換插值色彩空間：用 oklch 讓過渡更鮮豔 -->
<div class="h-16 w-full rounded-lg
            bg-linear-to-r/oklch from-blue-500 to-pink-500">
</div>

漸層文字的原理是：先給元素一個漸層背景，再用 bg-clip-text 把背景裁切成文字的形狀，最後 text-transparent 讓文字本身透明，漸層就從文字缺口透出來——這三顆 class 缺一不可（漏掉 text-transparent 會看不到漸層，這是最常見的坑）。色標位置範例用 from-10% via-50% to-90% 指定每個顏色落在漸層軸的哪個百分比，藉此調整顏色分佈的疏密。插值色彩空間範例在方向後加 /oklch（bg-linear-to-r/oklch），讓藍到粉的過渡走 OKLCH 插值，中間更鮮豔不變濁。

範例四：背景圖與擺放控制

實際圖片背景仍常用 style 帶 URL，再用 Tailwind 控制擺放；漸層遮罩疊加是讓圖上文字清楚的關鍵：

<!-- 背景圖鋪滿 + 置中 + 不重複，疊上漸層遮罩讓文字可讀 -->
<div class="relative h-72 overflow-hidden rounded-xl bg-cover bg-center bg-no-repeat"
     style="background-image: url('/img/hero.jpg')">

  <!-- 由下往上的黑色漸層遮罩，讓底部文字浮出 -->
  <div class="absolute inset-0 bg-linear-to-t from-black/70 to-transparent"></div>

  <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
    <h2 class="text-xl font-bold">圖片標題</h2>
    <p class="mt-1 text-sm text-white/80">疊加漸層遮罩後，文字清楚可讀</p>
  </div>
</div>

<!-- 視差背景：桌面啟用 bg-fixed，行動端退回 bg-scroll -->
<div class="h-72 bg-scroll bg-cover bg-center md:bg-fixed"
     style="background-image: url('/img/parallax.jpg')">
</div>

背景圖擺放的四個旋鈕在此登場：bg-cover（縮放到鋪滿容器、可能裁切）、bg-center（對齊中央）、bg-no-repeat（不平鋪）是背景圖最常見的黃金組合。圖片上直接放文字往往看不清，所以疊一層 bg-linear-to-t from-black/70 to-transparent——由下方黑到上方透明的漸層遮罩，讓底部文字浮出來，這是產品卡片最實用的手法。視差效果用 bg-fixed（background-attachment: fixed）讓背景相對視窗固定，但要注意 iOS Safari 不支援，所以寫成 bg-scroll md:bg-fixed——行動端退回正常捲動、桌面才啟用視差。

順帶一提背景圖的其他兩個旋鈕：bg-size 除了 bg-cover／bg-contain／bg-auto，還能用任意值 bg-[length:200px_100px] 指定精確尺寸；bg-position 除了 bg-center，還有 bg-top／bg-right-bottom 等九宮格位置，同樣支援任意值 bg-[center_top_2rem]。而 bg-repeat 家族除了 bg-no-repeat，還有 bg-repeat-x（只橫向平鋪）、bg-repeat-y（只縱向）、bg-repeat-round、bg-repeat-space，做圖案底紋時很好用。這四個旋鈕彼此獨立，可自由組合。

範例五：v4 mask 遮罩（邊緣淡出）

v4 的 mask-* 讓「邊緣淡出／羽化」不再需要手寫 CSS。它和漸層共用 from／to 的心智模型：

<!-- 長圖底部淡出：從 50% 高度開始淡、到 90% 完全透明 -->
<img src="/img/tall.jpg" alt=""
     class="w-full mask-b-from-50% mask-b-to-90%" />

<!-- 左右兩側淡出：常用於橫向捲動列表的邊緣提示 -->
<div class="flex gap-4 overflow-x-auto mask-x-from-90% mask-x-to-100%">
  <div class="size-32 shrink-0 rounded-xl bg-blue-500"></div>
  <div class="size-32 shrink-0 rounded-xl bg-purple-500"></div>
  <div class="size-32 shrink-0 rounded-xl bg-pink-500"></div>
</div>

<!-- 徑向遮罩：讓元素呈現中心清晰、邊緣淡出的聚光效果 -->
<div class="size-64 mask-radial-from-60% mask-radial-to-100%
            bg-linear-to-br from-cyan-400 to-blue-600">
</div>

遮罩的原理是：用一個漸層形狀當「顯示地圖」——不透明的地方完整顯示、透明的地方被遮掉、中間半透明過渡。第一個 img 加上 mask-b-from-50% mask-b-to-90%，意思是「底部（bottom）方向，從 50% 高度處開始淡出、到 90% 完全透明」，做出長圖漸隱效果。第二個用 mask-x-from-90% mask-x-to-100% 讓左右兩側淡出，是橫向捲動列表常見的「還有更多」邊緣提示。第三個 mask-radial-from-60% 做徑向遮罩，讓元素中心清晰、邊緣呈圓形淡出，是純 class 就能做的聚光效果。這些過去都得手寫 mask-image 的 CSS，v4 直接內建成一整組 class，是這一版最實用的新增之一。

除了上面三種常用形態，mask-* 家族還有一批進階 class 值得知道：mask-y-from-*／mask-y-to-* 做上下雙邊淡出（對稱於 mask-x-*）、mask-linear-45 指定任意角度的線性遮罩、mask-conic-* 做錐形遮罩，以及 mask-circle／mask-ellipse 決定徑向遮罩是正圓還是橢圓。更底層還有 mask-clip-*、mask-composite-*、mask-mode-*、mask-origin-*、mask-position-*、mask-repeat-*、mask-size-* 一整排，對應 CSS 遮罩的裁切、合成、定位與尺寸控制——這些平常用不到，但當你要精細調校遮罩時，Tailwind 都有對應的 class，不必掉回手寫 CSS。心智模型和漸層一模一樣：遮罩就是「一張決定透明度的漸層」，from 是完整顯示的一端、to 是淡出到透明的一端，學會漸層就等於學會遮罩。

常見錯誤與最佳實踐

五個最容易踩的背景與漸層坑

坑一：還在用 v3 的 bg-gradient-to-*。 從 v3 帶過來的習慣，寫 bg-gradient-to-r from-blue-500 to-purple-500，在純 v4 語法下應改名。根治法：全域把 bg-gradient-to-* 替換成 bg-linear-to-*（八個方向一一對應），順便就能用上 bg-radial、bg-conic 與角度語法。

<!-- ❌ v3 舊寫法 -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500">...</div>

<!-- ✅ v4 新寫法：gradient → linear -->
<div class="bg-linear-to-r from-blue-500 to-purple-500">...</div>

坑二：漸層文字漏了 text-transparent。 只寫 bg-clip-text 卻忘了把文字設透明，漸層會被文字本身的顏色蓋住，完全看不到。根治法：漸層文字必湊齊三顆 class——漸層背景 + bg-clip-text + text-transparent，缺一不可。

<!-- ❌ 少了 text-transparent，看不到漸層 -->
<span class="bg-linear-to-r from-blue-500 to-red-500 bg-clip-text">文字</span>

<!-- ✅ 三顆湊齊 -->
<span class="bg-linear-to-r from-blue-500 to-red-500 bg-clip-text text-transparent">文字</span>

坑三：只給 from／to 卻沒指定方向。 只寫 from-blue-500 to-purple-500 而漏掉 bg-linear-to-r 這類方向 class，漸層不會出現（沒有 background-image 可套用色標）。根治法：方向 class 與色標 class 必須成對出現，先有 bg-linear-*／bg-radial／bg-conic，from／via／to 才有意義。

坑四：bg-fixed 在行動端失效還硬用。 background-attachment: fixed 在 iOS Safari 不被支援，直接寫 bg-fixed 的視差效果在手機上會壞掉甚至造成閃爍。根治法：用響應式前綴分流 bg-scroll md:bg-fixed，只在桌面啟用視差。

坑五：把實際圖片 URL 硬塞進任意值。 雖然 bg-[url('/very/long/path.jpg')] 語法上可行，但長 URL 塞進 class 名極難維護、也讀不懂。根治法：實際圖片背景用 style="background-image: url(...)" 帶 URL、Tailwind 只負責 bg-cover／bg-center 等擺放，職責分離才好維護。

背景與漸層最佳實踐清單

• 漸層一律用 v4 命名：bg-linear-to-*（線性）、bg-radial（徑向）、bg-conic（錐形），別再寫 v3 的 bg-gradient-to-*。
• 方向 + 色標成對出現：先有 bg-linear-* 等方向 class，from／via／to 才生效；漸層文字再補 bg-clip-text text-transparent。
• 圖上文字必疊漸層遮罩：bg-linear-to-t from-black/60 to-transparent 讓文字浮出，比整張圖降亮度更靈活。
• 實際圖片走 style、擺放走 Tailwind：URL 用 style="background-image: url(...)"，bg-cover／bg-center／bg-no-repeat 用 class。
• bg-fixed 記得響應式分流：bg-scroll md:bg-fixed，避開 iOS Safari 不支援的問題，並留意頻繁重繪的效能。
• 善用 v4 mask 做淡出：長圖底部淡出用 mask-b-from-*／mask-b-to-*，橫向列表邊緣用 mask-x-*，聚光用 mask-radial-*，取代手寫 CSS。
• 需要更乾淨的過渡就切插值：在方向後加 /oklch（如 bg-linear-to-r/oklch），跨色相漸層中間更鮮豔不變濁。

小結

這是 TailwindCSS 完整教學 系列的第十六篇，延續 視覺樣式章（TW-4）。上一篇 《色彩系統》 我們把 22 色相 × 50–950 色階、四大上色工具與 OKLCH 講透，替版面上好了「色」；而這一篇把單一顏色延伸成「面」與「光」，玩轉背景與漸層。回顧幾個重點：

• 背景三大類：背景色（bg-*）、背景圖／漸層（同屬 background-image），以及 bg-cover／bg-center／bg-no-repeat／bg-fixed 四個擺放旋鈕。
• v4 三種漸層：bg-linear-to-r（線性，v3 是 bg-gradient-to-r）、bg-radial（徑向光暈）、bg-conic（錐形），搭配 from／via／to 色標。
• 角度與色標位置：bg-linear-45 指定角度、from-10%／via-50%／to-90% 控制顏色分佈、/oklch 切換插值色彩空間。
• v4 mask 遮罩：mask-b-from-*（邊緣淡出）、mask-radial（聚光）、mask-linear-*（指定角度），用純 class 做過去要手寫 CSS 的羽化效果。
• v3 → v4 遷移：核心就一句——把 bg-gradient-to-* 全數換成 bg-linear-to-*，並記得漸層文字要湊齊 bg-clip-text text-transparent。

面與光都有了，版面開始有質感。但目前元素之間還缺乏清楚的界線與層次——接下來我們替元素「描邊、圓角、分隔」。下一篇 《邊框》 會帶你掌握 border 寬度與樣式、rounded-* 圓角、divide-* 分隔線與 ring-* 外框光暈，讓每個區塊都有俐落的輪廓。