TailwindCSS 陰影與效果：shadow、opacity、mix-blend 全解 | TailwindCSS 完整教學

上一篇替版面描好了「邊」與「角」，這一篇替每個區塊點上「光」。TailwindCSS 的陰影與效果系統涵蓋 shadow-*（盒陰影）、shadow-<color>（彩色陰影）、v4 全新的 inset-shadow-*（內側陰影）與 text-shadow-*（文字陰影），再加上 opacity（不透明度）、mix-blend-mode（混合模式）與 bg-blend-*（背景混合）。這些工具是打造卡片層次、發光按鈕、玻璃擬態與品牌視覺的核心。v4 對這套系統動了幾刀——盒陰影刻度整體平移、新增 inset-shadow-* 與 text-shadow-*、陰影顏色可直接用 / 透明度修飾符。這一篇會帶你替扁平的版面加上最關鍵的一層立體感。

前言

上一篇 《邊框》 我們替每個區塊描了邊、磨了圓角、拉了分隔線，版面開始有清楚的界線與層次。但目前的畫面還是「平」的——所有元素像是貼在同一張紙上，缺少深淺、遠近的立體感：卡片浮不起來、按鈕沒有質感、彈出層跟底層貼在一起分不出前後。這些「光影」的活，正是這一篇 陰影與效果 要交給你的工具。

用一個生活化的類比來理解陰影系統：想像你在佈置一個櫥窗。 最基礎的是替商品打一盞頂光，讓它在桌面上投下一道影子（shadow-* 盒陰影），影子越深、商品看起來離桌面越遠、越「浮」；有時你會替影子染上商品的顏色，做出霓虹般的光暈（shadow-<color> 彩色陰影）；如果是玻璃或凹槽這類物件，光會在它內緣打出一圈暗影（inset-shadow-* 內側陰影）；照片上的說明文字，也要靠一層淡淡的字影才能在雜亂背景上讀得清楚（text-shadow-*）。除了影子，你還能調整玻璃的通透程度（opacity 不透明度），或讓兩層色紙疊在一起產生新的顏色（mix-blend-mode 混合模式）。Tailwind 把這一整套打光工法都做成了 class，你不用手寫 CSS 的 box-shadow、opacity、mix-blend-mode，就能組出有層次、有質感的視覺。

而 TailwindCSS v4 是本系列的預設版本，它對陰影與效果系統做了幾項關鍵變更：盒陰影刻度整體「往下平移一級」（舊的 shadow 改名 shadow-sm、新增更小的 shadow-xs／shadow-2xs）、新增獨立的 inset-shadow-* 內側陰影、新增 text-shadow-* 文字陰影（v4.1+），以及陰影顏色可直接用 shadow-blue-500/50 這種 / 透明度修飾符而不再需要 CSS 變數 workaround。本篇你將學到：

• box-shadow 盒陰影：shadow-xs／shadow-sm／shadow-md～shadow-2xl 的層次刻度，以及 shadow-none
• 彩色陰影與透明度：shadow-blue-500、shadow-black/10，讓陰影更自然或更有品牌感
• v4 新工具：inset-shadow-* 內側陰影（含顏色）、text-shadow-* 文字陰影
• 不透明度與混合：opacity-* 不透明度、mix-blend-* 元素混合、bg-blend-* 背景混合
• v3 → v4 差異：盒陰影刻度平移、inset-shadow-*／text-shadow-* 新增、陰影顏色 / 修飾符

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

核心概念

陰影與效果工具的分類

Tailwind 的陰影與效果 utility，依「作用機制、影響範圍」可分成幾大類：box-shadow（矩形盒陰影）、shadow 顏色、inset-shadow（v4 內側陰影）、text-shadow（v4 文字陰影）、opacity（不透明度）與混合模式（mix-blend 元素間、bg-blend 背景層間）。下表先建立全景：

不用一次記完。核心心智模型有三句話：shadow-* 讓元素「浮起來」、數字越大浮越高；opacity 影響整個元素（連文字一起透明），只想讓背景／陰影半透明要用 / 修飾符；mix-blend 與 bg-blend 讓顏色層疊產生新色。 抓住這三點，其餘都是刻度與命名的細節。

box-shadow 盒陰影與 v4 刻度平移

盒陰影用 shadow-* 控制 box-shadow，從幾乎看不見的細影到強烈的懸浮投影一應俱全。陰影的層級對應「元素離頁面多遠」：shadow-sm 像貼在紙上、shadow-lg 像浮起數公分、shadow-2xl 像彈出層飄在最上層。下表列出 v4 的完整刻度：

v4 陰影平移提醒：v4 把整組盒陰影刻度「往下平移一級」。v3 中無後綴的 shadow（預設）在 v4 改名為 shadow-sm；v3 的 shadow-sm 則往下對應成 v4 的 shadow-xs；同時 v4 在最小端新增了 shadow-xs 與 shadow-2xs。從 v3 遷移時，最容易漏的就是把單獨的 shadow 改成 shadow-sm，否則陰影會比原本小一級。遷移時建議逐一比對，別假設同名 class 外觀一致。

陰影顏色與透明度

預設的 shadow-* 是半透明的黑色陰影，但你可以用 shadow-<color> 替陰影染上任意顏色。這有兩個經典用途：一是把純黑陰影換成帶透明度的黑（shadow-black/10），讓陰影更柔和自然——純黑陰影在淺色底上常顯得髒、太重；二是把陰影染成按鈕本身的品牌色（shadow-blue-500/40），做出彷彿在發光的效果。

顏色語法和上色工具完全一致：shadow-{色相}-{色階}，例如 shadow-blue-500、shadow-red-500。這裡有 v4 的重要變更：陰影顏色可以直接加上 / 透明度修飾符，例如 shadow-blue-500/40（40% 透明度的藍色陰影）、shadow-black/10（10% 黑色陰影）。在 v3 這通常需要透過 CSS 變數繞路才能做到，v4 讓它變成一行 class。實務上，陰影幾乎都建議帶點透明度——不透明的實色陰影會顯得生硬，shadow-black/10 這種淡陰影才貼近真實光影。

inset-shadow 內側陰影（v4 新增）

前面的 shadow-* 都是往元素外投影、讓元素「浮起」；inset-shadow-* 則相反，它把陰影畫在元素內緣，製造「凹陷」的視覺——像是把元素往頁面裡壓下去。這對輸入框、凹槽面板、按壓態按鈕特別有用。

inset-shadow-* 是 v4 全新的一整組工具，取代並強化了 v3 只有單一級的 shadow-inner。它的優勢有二：第一，它是刻度化的——inset-shadow-2xs、inset-shadow-xs、inset-shadow-sm，可依凹陷深淺選級；第二，也是最關鍵的，它有獨立的顏色修飾符 inset-shadow-black/10，而且能與外側 shadow-* 同時堆疊——同一個元素可以一邊往外投影、一邊有內凹陰影，做出精緻的「浮起＋內描邊」雙重效果，這在 v3 靠單一 shadow-inner 是做不到的。

text-shadow 文字陰影（v4.1 新增）

text-shadow-* 是 v4.1 才加入的文字陰影工具。過去要替文字加陰影，只能寫任意值（[text-shadow:...]）或自訂 CSS，現在可以直接用刻度化 class：text-shadow-2xs、text-shadow-xs、text-shadow-sm、text-shadow-md、text-shadow-lg，並用 text-shadow-black/30 設定陰影顏色。

它最經典的用途是提升可讀性：當白色文字疊在深色照片、漸層背景或影片上時，若背景剛好也有淺色區域，文字會「消失」看不清；加一層 text-shadow-md 或 text-shadow-black/40，就能替文字勾出一圈暗邊，讓它在任何背景上都清晰。這是 v3 完全沒有對應寫法的新工具。

opacity 不透明度

opacity-* 控制 CSS 的 opacity 屬性，值從 opacity-0（完全透明）到 opacity-100（完全不透明），常用的還有 opacity-50、opacity-75、opacity-90 等。最關鍵的觀念是：opacity 作用在整個元素上，包含背景、邊框、文字與所有子元素，全部一起變透明。

這是初學者最常踩的坑：想讓卡片背景半透明就寫 opacity-50，結果卡片裡的文字也霧掉了。正確做法是——只想讓背景／邊框／陰影半透明，用顏色的 / 修飾符（bg-blue-500/50、border-black/10、shadow-black/10），這樣只作用在該色的 alpha 通道、文字完全不受影響。opacity-* 真正的用武之地是「連同內容一起」要變透明的場景：淡入淡出動畫、把 disabled 元素整體調淡（opacity-50）、圖片浮水印等。

混合模式：mix-blend 與 bg-blend

混合模式讓上下兩層顏色依演算法疊合出新色，是做創意視覺、印刷風文字、發光效果的利器。Tailwind 提供兩套：

• mix-blend-*：控制 mix-blend-mode，決定「元素與其下方所有元素」如何混合。常用的有 mix-blend-multiply（正片疊底，變暗、適合文字疊圖保留紋理）、mix-blend-screen（濾色，變亮、適合深色底做發光）、mix-blend-overlay（疊加，增強對比）、mix-blend-difference（差值，常用於「反白」文字——文字在淺色背景變深、在深色背景變淺，自動保持可讀）。v4 還新增了 mix-blend-plus-lighter。
• bg-blend-*：控制 background-blend-mode，決定「同一元素的多個背景圖層之間」如何混合（例如一張背景圖疊一層漸層色）。bg-blend-multiply、bg-blend-overlay 是最常用的兩個。

兩者的分界要記牢：mix-blend 混的是「元素 vs 底下的元素」，bg-blend 混的是「同一元素內的多個背景層」。 另外要注意，mix-blend-* 會建立新的 stacking context，可能影響 z-index 的行為，用在有堆疊需求的區塊時要留意。

實作範例

理論看完，我們用幾個高頻範例把盒陰影、彩色陰影、內側陰影與混合模式串起來。以下都是完整的 HTML + Tailwind，可直接貼進頁面觀察效果。

範例一：卡片陰影層次系統

最日常的陰影用途就是替卡片製造「浮起」的層次。訣竅是用陰影深淺表達元素離頁面的遠近，並在 hover 時加深陰影做出互動回饋：

<!-- 層次一：一般卡片，貼在頁面上，hover 時浮起 -->
<div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6
            hover:shadow-md transition-shadow duration-200 cursor-pointer">
  <h3 class="font-semibold text-gray-900">可互動卡片</h3>
  <p class="mt-2 text-sm text-gray-500">shadow-sm 貼在頁面上，hover 時升到 shadow-md 製造「懸浮」感</p>
</div>

<!-- 層次二：特色卡片，本來就浮得比較高 -->
<div class="bg-white rounded-xl shadow-lg ring-1 ring-blue-500/10 p-6">
  <h3 class="font-semibold text-blue-900">特色卡片（shadow-lg）</h3>
  <p class="mt-2 text-sm text-gray-500">陰影更深，視覺上比一般卡片更靠近使用者</p>
</div>

<!-- 層次三：彈出層 / Modal，飄在最上層 -->
<div class="bg-white rounded-2xl shadow-2xl p-8 max-w-lg">
  <h2 class="text-xl font-bold text-gray-900">對話框（shadow-2xl）</h2>
  <p class="mt-2 text-sm text-gray-500">最強的陰影，把彈出層和底層明確分開</p>
</div>

三張卡片示範了陰影刻度如何表達層次。第一張用 shadow-sm 讓卡片安靜貼在頁面上，配 hover:shadow-md transition-shadow 在滑鼠移入時升高一級，這種「hover 浮起」是可點卡片的標準手法。第二張用 shadow-lg 讓特色卡片本來就浮得比較高，視覺上更靠近使用者。第三張用 shadow-2xl 給彈出層，最強的陰影把 Modal 和底層徹底分開。記住：陰影越深＝離頁面越遠，這個直覺是設計層次的關鍵。

v4 提醒：以上的 shadow-sm 在 v4 對應的是 v3 的無後綴 shadow。若你從 v3 遷移、原本寫的是單獨的 shadow，在 v4 要改成 shadow-sm 才能維持相同外觀；原本的 shadow-sm 則要改成 shadow-xs。

範例二：發光按鈕（彩色陰影）

把陰影染成按鈕本身的顏色，就能做出彷彿在發光的效果，是強化品牌感與 CTA 的常見手法。關鍵是彩色陰影一律帶透明度（/40、/50）才自然：

<!-- 品牌藍發光按鈕：陰影染成藍色 -->
<button class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-xl
               shadow-lg shadow-blue-500/40
               hover:shadow-xl hover:shadow-blue-500/50
               transition-all duration-200">
  品牌藍按鈕
</button>

<!-- 危險操作按鈕：紅色陰影 -->
<button class="px-6 py-3 bg-red-600 text-white font-semibold rounded-xl
               shadow-lg shadow-red-500/40
               hover:bg-red-700 hover:shadow-red-600/50
               transition-all duration-200">
  刪除資料
</button>

<!-- 一般卡片用中性淡陰影：shadow-black/10 比純黑更柔和 -->
<div class="px-6 py-4 bg-white rounded-xl shadow-lg shadow-black/10">
  <p class="text-gray-700 text-sm">中性卡片用 shadow-black/10，比預設純黑陰影更柔和乾淨</p>
</div>

三個範例示範了 shadow-<color> 的用法。發光按鈕用 shadow-lg shadow-blue-500/40 把陰影染成和按鈕同色的藍，hover 時再加深到 shadow-xl shadow-blue-500/50，做出「亮起來」的回饋——注意這裡兩個 class 是分工的：shadow-lg 決定陰影的形狀與大小、shadow-blue-500/40 決定陰影的顏色。中性卡片則示範另一個方向：把預設的純黑陰影換成 shadow-black/10，在淺色底上更柔和、不顯髒。

v4 提醒：shadow-blue-500/40 這種「陰影顏色 + / 透明度」的寫法是 v4 的原生能力。v3 要做到彩色半透明陰影通常得透過 CSS 變數繞路，v4 直接一行 class 搞定。

範例三：內凹輸入框與按壓按鈕（inset-shadow）

inset-shadow-* 把陰影畫在內緣，做出「凹陷」感，最適合輸入框、凹槽面板與按壓態。這裡也示範 v4 的招牌——外投影與內凹陰影同時堆疊：

<!-- 凹陷輸入框：inset-shadow 讓輸入區看起來往內凹 -->
<input type="text" placeholder="搜尋..."
       class="w-full px-4 py-2.5 rounded-lg bg-gray-100 text-gray-900
              inset-shadow-sm inset-shadow-black/10
              border border-gray-200
              focus:outline-none focus:ring-2 focus:ring-blue-500">

<!-- 凹槽面板：適合放程式碼、終端輸出 -->
<div class="bg-gray-100 rounded-xl inset-shadow-sm inset-shadow-black/10 p-6">
  <p class="text-gray-600 text-sm">凹陷顯示區，視覺上比周圍低一階</p>
</div>

<!-- v4 雙重陰影：外投影 + 內凹同時存在 -->
<button class="px-6 py-3 bg-white rounded-xl font-medium text-gray-700
               shadow-md shadow-black/10
               inset-shadow-2xs inset-shadow-white
               active:inset-shadow-sm active:shadow-none active:scale-95
               transition-all">
  可按壓按鈕
</button>

三個範例串起 inset-shadow 的核心用途。輸入框用 inset-shadow-sm inset-shadow-black/10 讓輸入區看起來往頁面裡凹，暗示「這裡可以填東西」。凹槽面板同理，適合放程式碼區塊或終端輸出，視覺上比周圍低一階。可按壓按鈕展示 v4 的招牌：平時 shadow-md（外投影，浮起）配 inset-shadow-2xs inset-shadow-white（內緣一絲白色高光），按下（active:）時切成 inset-shadow-sm active:shadow-none——外投影消失、內凹加深，做出「被壓下去」的擬真回饋。外投影與內凹陰影能在同一元素共存，正是 v4 inset-shadow-* 相對舊 shadow-inner 最大的躍進。

範例四：混合模式與文字陰影

最後用混合模式與文字陰影做創意視覺。mix-blend-* 讓文字與背景疊出印刷般的效果，text-shadow-* 則替照片上的文字保底可讀性：

<!-- mix-blend-multiply：文字疊在漸層上，像實體印刷 -->
<div class="relative overflow-hidden rounded-2xl">
  <div class="bg-gradient-to-br from-yellow-300 to-orange-400 p-12 text-center">
    <h1 class="text-6xl font-black text-blue-900 mix-blend-multiply">CREATIVE</h1>
  </div>
</div>

<!-- text-shadow：深色照片背景上的白字加陰影保底可讀 -->
<div class="relative rounded-2xl overflow-hidden bg-gradient-to-br from-slate-700 to-slate-900 p-10">
  <h2 class="text-4xl font-bold text-white text-shadow-md text-shadow-black/50">
    照片上的標題文字
  </h2>
  <p class="mt-2 text-white/90 text-shadow-sm">副標也加一層淡字影，背景再亂也讀得清</p>
</div>

<!-- opacity 正確 vs 錯誤：只想背景透明時用 /alpha 而非 opacity -->
<div class="bg-blue-500/50 text-blue-950 rounded-lg p-4">
  只有背景 50% 透明，文字維持清晰（正確做法：bg-blue-500/50）
</div>

三個範例收束本篇工具。第一個用 mix-blend-multiply 讓深藍文字和黃橙漸層疊合，文字會吃進底下的漸層色、產生像實體印刷的疊色質感。第二個是 text-shadow-* 的黃金用途：深色背景上的白字加 text-shadow-md text-shadow-black/50，勾出一圈暗邊，就算背景換成雜亂照片也讀得清。第三個示範 opacity 的正解：想讓背景半透明而文字維持清晰，用 bg-blue-500/50 的 / 修飾符，別用 opacity-50（那會連文字一起霧掉）。

常見錯誤與最佳實踐

五個最容易踩的陰影與效果坑

坑一：opacity-* 讓文字連同背景一起變透明。 想讓卡片背景半透明就寫 opacity-50，結果裡面的文字也霧掉了。因為 opacity 作用在整個元素含子元素。根治法：只想讓背景／邊框／陰影半透明，用顏色的 / 修飾符。

<!-- ❌ 文字也一起變 50% 透明，霧霧的 -->
<div class="bg-blue-500 opacity-50 text-white p-4">文字也透明了</div>

<!-- ✅ 只有背景透明，文字清晰 -->
<div class="bg-blue-500/50 text-blue-950 p-4">只有背景 50% 透明</div>

坑二：v4 沿用 v3 的 shadow 名稱，陰影大小跑掉。 v4 盒陰影刻度整體平移，同名 class 外觀和 v3 不同。根治法：遷移時把單獨的 shadow 改成 shadow-sm、原本的 shadow-sm 改成 shadow-xs，別假設同名一致。

<!-- ❌ 從 v3 直接搬來的 shadow，在 v4 其實已改名 -->
<div class="shadow rounded-lg p-4">卡片</div>

<!-- ✅ v4 中要寫 shadow-sm 才等於 v3 的預設 shadow -->
<div class="shadow-sm rounded-lg p-4">卡片</div>

坑三：對 SVG／透明 PNG 用 shadow-*（box-shadow），陰影是矩形的。 shadow-* 是矩形盒陰影，套在透明背景的圖形上，陰影會沿著方形邊界而非圖形輪廓。根治法：非矩形圖形改用 drop-shadow-*（CSS filter，跟隨圖形形狀，下一篇《濾鏡》會詳談）。

<!-- ❌ box-shadow 沿矩形邊界，logo 邊緣露出方形影子 -->
<img src="logo.svg" class="shadow-lg">

<!-- ✅ drop-shadow 跟隨圖形實際輪廓 -->
<img src="logo.svg" class="drop-shadow-lg">

坑四：實色不透明陰影顯得生硬。 直接用純黑陰影或不帶透明度的彩色陰影，在淺色底上會顯得髒、太重。根治法：陰影一律帶點透明度，shadow-black/10、shadow-blue-500/40 才貼近真實光影。

坑五：過度堆疊陰影造成「陰影地獄」。 卡片裡包卡片、每一層都加 shadow-xl，畫面會亂成一團、失去層次意義。根治法：陰影用來表達「層次」，同一畫面的陰影深淺要有節制——最多兩三個層級，別每個元素都往最深加。

陰影與效果最佳實踐清單

• 陰影一律帶透明度：shadow-black/10 比純黑更柔和、shadow-blue-500/40 比實色更自然。
• 用陰影深淺表達層次：shadow-sm（貼頁面）→ shadow-lg（浮起）→ shadow-2xl（彈出層），深淺對應遠近。
• hover 用陰影過渡而非位移：shadow-sm hover:shadow-md transition-shadow，做出低成本的懸浮回饋。
• 背景半透明用 /alpha、整體淡出才用 opacity：分清「要素透明」與「整體淡出」兩種需求。
• 善用 v4 inset-shadow 做雙重陰影：外側 shadow-* 配內側 inset-shadow-*，做出精緻的浮起＋內凹效果。
• 深色背景上的文字加 text-shadow：text-shadow-md text-shadow-black/40 保底可讀性。
• 非矩形圖形用 drop-shadow：SVG、透明 PNG 的陰影要跟隨輪廓，別用矩形的 shadow-*。
• 記得陰影刻度平移：從 v3 遷移時，單獨的 shadow 要改成 shadow-sm。

小結

這是 TailwindCSS 完整教學 系列的第十八篇，延續 視覺樣式章（TW-4）。上一篇 《邊框》 我們替每個區塊描邊、磨圓角、拉分隔線，讓版面有了清楚的界線；而這一篇替版面點上「光影」，讓扁平的元素浮了起來、有了深淺遠近的立體感。回顧幾個重點：

• box-shadow 盒陰影：shadow-2xs／shadow-xs／shadow-sm（v3 的 shadow）～shadow-2xl，用深淺表達元素離頁面的遠近，shadow-none 移除。
• 陰影顏色與透明度：shadow-<color> 替陰影染色，一律建議帶 / 透明度（shadow-black/10、shadow-blue-500/40），做出柔和陰影或發光效果。
• v4 新工具：inset-shadow-* 內側陰影（刻度化、可染色、能與外投影堆疊），text-shadow-*（v4.1+）替深色背景上的文字保底可讀性。
• 不透明度與混合：opacity-* 影響整個元素含子元素（背景半透明請改用 /alpha），mix-blend-* 混元素與底層、bg-blend-* 混同元素的背景層。
• v3 → v4 差異：盒陰影刻度整體平移、inset-shadow-*／text-shadow-* 新增、陰影顏色可直接用 / 修飾符。

光影有了，版面終於從「平面」走向「立體」。但目前我們只碰了陰影這一種效果——還有一整組能模糊、調色、反轉、變亮變暗的視覺魔法沒登場。下一篇 《濾鏡》 會帶你掌握 blur（模糊）、brightness／contrast（明暗對比）、grayscale／sepia（去色濾鏡）、backdrop-blur（毛玻璃）等 filter 與 backdrop-filter 工具，替版面加上最後一層影像級的質感。