TailwindCSS 濾鏡：blur、backdrop-blur 毛玻璃全解 | TailwindCSS 完整教學

上一篇替版面點上了「光影」，這一篇替畫面裝上「鏡頭」。TailwindCSS 的濾鏡系統涵蓋 filter 系列（blur 模糊、brightness／contrast 明暗、grayscale／sepia 去色、saturate 飽和度、hue-rotate 色相、invert 反色、drop-shadow 輪廓陰影）與 backdrop-filter 系列（backdrop-blur 等，做出毛玻璃效果）。這些工具讓你不改圖片檔本身，就能即時調色、模糊、做出玻璃擬態與影像級質感。v4 對這套系統做了關鍵簡化——濾鏡工具會自動組合、不再需要額外加 filter class。這一篇會帶你替版面加上最後一層「鏡頭濾鏡」。

前言

上一篇 《陰影與效果》 我們替每個區塊點上了光影，讓扁平的元素浮了起來、有了深淺遠近的立體感。但到目前為止，我們動的都是元素的「外框」與「陰影」——元素或圖片本身的畫面內容，我們一個像素都還沒碰過。照片就是照片原本的顏色、清晰度與明暗，想讓它變灰階、變柔焦、變亮、變復古色調？還沒有工具。這些「影像級」的調整，正是這一篇 濾鏡（Filters） 要交給你的能力。

用一個生活化的類比來理解濾鏡系統：想像你在相機鏡頭前裝上一片片濾鏡。 你可以裝上一片柔焦鏡讓畫面朦朧（blur 模糊）、轉一下亮度旋鈕讓照片變亮變暗（brightness）、加大對比讓明暗更分明（contrast）、換上黑白底片拍出灰階（grayscale）、套一層復古濾鏡做出泛黃老照片（sepia）、扭一下色相環讓整片顏色平移（hue-rotate），甚至疊好幾片濾鏡組合出獨特風格。而 backdrop-filter 更神奇——它不是對照片本身、而是對照片「後方」的背景動手腳，這正是 iOS 控制中心、macOS 選單那種毛玻璃質感的來源：一片半透明的玻璃，透出後方模糊朦朧的畫面。Tailwind 把這一整套鏡頭工法都做成了 class，你不用手寫 CSS 的 filter、backdrop-filter，就能即時調校任何元素的畫面。

而 TailwindCSS v4 是本系列的預設版本，它對濾鏡系統做了一項關鍵簡化：濾鏡工具現在會各自輸出獨立 CSS 屬性並自動組合，不再需要額外的 filter 或 backdrop-filter 開關 class（v3 中你得寫 filter blur-sm 才生效）；同時 v4 在模糊最小端新增了 blur-xs（4px）。本篇你將學到：

• filter 系列：blur（模糊）、brightness／contrast（明暗對比）、grayscale／sepia（去色濾鏡）、saturate（飽和度）、hue-rotate（色相）、invert（反色）、drop-shadow（跟隨輪廓的陰影）
• backdrop-filter 系列：backdrop-blur-* 等，做出毛玻璃效果的三件套配方
• 濾鏡組合與 hover 互動：多片濾鏡疊加、grayscale hover:grayscale-0 這類漸進效果
• 效能與陷阱：毛玻璃需要半透明背景、濾鏡建立 stacking context、動畫中避免 blur
• v3 → v4 差異：濾鏡工具自動組合、不再需要 filter／backdrop-filter class、新增 blur-xs

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

核心概念

濾鏡工具的兩大分類

Tailwind 的濾鏡 utility 依「作用對象」分成兩大類，這是理解整個系統的第一把鑰匙：filter 系列作用在「元素自身及其內容」（例如讓一張圖片變模糊），backdrop-filter 系列（backdrop-* 前綴）作用在「元素後方的背景」（例如透過半透明卡片看到模糊的底圖，即毛玻璃）。下表先建立全景：

不用一次記完。核心心智模型有三句話：filter 系列改變「元素自己」的畫面；backdrop-* 系列改變「元素後方背景」的畫面（毛玻璃）；多片濾鏡可以直接疊在同一個 class 屬性裡自動組合。 抓住這三點，其餘都是刻度與命名的細節——而且幾乎每個 filter 效果都有一個對應的 backdrop- 版本（backdrop-brightness、backdrop-grayscale、backdrop-sepia……），命名完全鏡射。

filter vs backdrop-filter：作用範圍的差別

這是濾鏡系統最容易混淆、也最關鍵的一組對照。同樣是「模糊」，blur-lg 和 backdrop-blur-lg 的效果天差地遠：

• blur-lg（filter）：模糊的是「這個元素自己」。套在一張圖片上，圖片本身變成一片朦朧；套在一個含文字的卡片上，卡片連同裡面的文字全部糊掉。
• backdrop-blur-lg（backdrop-filter）：模糊的是「這個元素後方、被它蓋住的背景」。元素自己的內容（文字、圖示）依然清晰，但你透過它看到的後方畫面是模糊的——這正是毛玻璃。

一句話總結：filter 糊的是「元素本身」，backdrop-filter 糊的是「元素背後」。這也解釋了為什麼毛玻璃卡片裡的文字不會糊掉——因為 backdrop-blur 根本沒動到元素自身內容。

blur 模糊與刻度

blur-* 控制 filter: blur()，數值越大越朦朧。v4 的完整刻度如下：

blur-xs（4px）是 v4 新增的更細等級。若需要精確半徑，用任意值 blur-[2px]。

明暗、對比、飽和度：以 100 為基準

brightness、contrast、saturate 三者是同一套設計邏輯：數字 -100 代表「原始不變」，小於 100 是減弱、大於 100 是增強。這比死記數值直覺得多：

• brightness-*（亮度）：brightness-100 原始、brightness-50 剩一半亮度（變暗）、brightness-150 變亮 50%、brightness-0 全黑。
• contrast-*（對比）：contrast-100 原始、contrast-50 對比減半（灰濛濛）、contrast-200 對比加倍（明暗更分明）。
• saturate-*（飽和度）：saturate-100 原始、saturate-0 完全無飽和（等同灰階）、saturate-200 顏色加倍鮮豔。

記住「100 是原點」，往上是加、往下是減，這三個工具就都掌握了。

去色與色相：grayscale、sepia、hue-rotate、invert

這四個是「改變顏色本身」的濾鏡，多為「開關型」（有 -0 歸零變體）：

• grayscale（灰階）：把畫面轉成黑白。搭配 grayscale-0 可做「hover 從黑白變彩色」的經典效果。
• sepia（棕褐色調）：套一層泛黃濾鏡，做出老照片、復古感。
• hue-rotate-*（色相旋轉）：把整片顏色沿色環平移指定度數（hue-rotate-90、hue-rotate-180 互補色），可做冷／暖色調轉換，支援負值 -hue-rotate-90。
• invert（反色）：顏色完全反轉（黑變白、白變黑），偶爾用於深色模式下反轉圖示，或無障礙高對比。

drop-shadow：跟隨輪廓的陰影

drop-shadow-* 是 filter: drop-shadow()，它和上一篇的 shadow-*（box-shadow）最關鍵的差別是：shadow-* 永遠沿矩形盒子邊界投影，drop-shadow-* 則跟隨圖形實際的不透明輪廓投影。所以去背 PNG、SVG logo、不規則形狀要用 drop-shadow-* 才不會露出方形影子。v4.1 起 drop-shadow 也支援顏色，例如 drop-shadow-lg drop-shadow-blue-500/50。代價是它屬於 filter，會建立 stacking context 且有一定效能成本，矩形元素仍建議用 shadow-*。

backdrop-filter：毛玻璃的來源

backdrop-* 系列完整鏡射了 filter 的所有效果（backdrop-blur、backdrop-brightness、backdrop-contrast、backdrop-grayscale、backdrop-saturate、backdrop-hue-rotate、backdrop-invert、backdrop-sepia、backdrop-opacity），差別只在於它作用於元素後方的背景。最常用的是 backdrop-blur-*，做出毛玻璃導覽列、通知卡片、對話框遮罩。毛玻璃有一個鐵律：元素必須有半透明背景（bg-white/80、bg-black/40），否則不透明背景會把後方完全遮住、看不到被模糊的畫面——這是初學者最常踩的坑，下一節會詳細示範。

實作範例

理論看完，我們用幾個高頻範例把 blur、明暗調色、grayscale hover、毛玻璃與濾鏡組合串起來。以下都是完整的 HTML + Tailwind，可直接貼進頁面觀察效果。

範例一：毛玻璃導覽列與通知卡片

毛玻璃是 backdrop-blur 最經典的應用。關鍵三件套：backdrop-blur-* + 半透明背景（bg-*/80）+ 後方要有內容可模糊：

<!-- 毛玻璃導覽列：固定在頂部，捲動時透出後方模糊的內容 -->
<header class="sticky top-0 z-50 backdrop-blur-md bg-white/80 border-b border-black/5">
  <nav class="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
    <a href="/" class="text-lg font-bold text-gray-900">BenzHub</a>
    <div class="flex items-center gap-6 text-sm font-medium text-gray-600">
      <a href="#" class="hover:text-gray-900">關於</a>
      <a href="#" class="hover:text-gray-900">產品</a>
      <a href="#" class="hover:text-gray-900">聯絡</a>
    </div>
  </nav>
</header>

<!-- 深色毛玻璃通知卡片：疊在照片或漸層背景上最有質感 -->
<div class="backdrop-blur-lg bg-black/30 border border-white/15 rounded-xl
            px-4 py-3 text-white shadow-lg shadow-black/20 max-w-sm">
  <p class="font-medium text-sm">操作成功</p>
  <p class="text-white/70 text-xs mt-0.5">資料已成功儲存</p>
</div>

兩個範例都是毛玻璃。導覽列用 backdrop-blur-md bg-white/80：backdrop-blur-md 把後方捲動的內容模糊化、bg-white/80 提供 80% 不透明的白底讓後方「透出來又不刺眼」，這就是 iOS／macOS 選單列那種質感。通知卡片改用深色配方 backdrop-blur-lg bg-black/30，疊在照片或漸層上時，透出的模糊背景會讓卡片像一片深色玻璃。注意兩者的文字都清晰可讀——因為 backdrop-blur 只糊背景、不糊元素自身內容。

v4 提醒：以上寫法在 v3 需要額外加 backdrop-filter 開關 class（backdrop-filter backdrop-blur-md）才生效。v4 已移除此要求，直接寫 backdrop-blur-md 即可。

範例二：圖片 hover 濾鏡效果（灰階變彩色）

grayscale hover:grayscale-0 配 transition 是作品集、團隊照牆最愛的手法：平時低調的黑白，滑鼠移入時「活過來」變彩色：

<!-- hover 從黑白變彩色，同時輕微放大 -->
<figure class="group relative overflow-hidden rounded-xl cursor-pointer">
  <img src="photo.jpg" alt="作品縮圖"
       class="w-full h-64 object-cover
              grayscale group-hover:grayscale-0
              scale-100 group-hover:scale-105
              transition-all duration-500">
  <!-- 底部漸層遮罩 + 標題，hover 時淡入 -->
  <figcaption class="absolute inset-x-0 bottom-0 p-4
                     bg-gradient-to-t from-black/70 to-transparent
                     text-white opacity-0 group-hover:opacity-100
                     transition-opacity duration-300">
    <p class="font-semibold text-sm">作品標題</p>
  </figcaption>
</figure>

<!-- 缺貨商品：灰階 + 調暗 + 半透明，一眼看出不可購買 -->
<img src="product.jpg" alt="缺貨商品"
     class="w-full h-48 object-cover rounded-lg
            grayscale brightness-75 opacity-60">

第一個範例用 group 讓整張卡片成為 hover 觸發區：圖片平時 grayscale（黑白），group-hover:grayscale-0 讓它在滑鼠移入時恢復彩色，再配 group-hover:scale-105 輕微放大、底部標題 group-hover:opacity-100 淡入，一組流暢的互動就完成了——transition-all duration-500 讓所有變化平順過渡。第二個範例則用濾鏡表達「狀態」：缺貨商品疊 grayscale brightness-75 opacity-60（去色＋調暗＋半透明），不用一個字就讓使用者明白「這個不能買」。

範例三：多濾鏡組合出風格化色調

濾鏡的威力在於組合——在 v4，多個濾鏡 class 直接寫在一起就會自動疊加。以下用組合做出三種風格化色調：

<!-- 復古老照片：降飽和 + 泛黃 + 略暗 + 提對比 -->
<img src="portrait.jpg" alt="復古肖像"
     class="w-full h-64 object-cover rounded-xl
            saturate-50 sepia brightness-90 contrast-110">

<!-- 霓虹夜景：高飽和 + 高對比 + 提亮 -->
<img src="city-night.jpg" alt="城市夜景"
     class="w-full h-64 object-cover rounded-xl
            saturate-200 contrast-125 brightness-110">

<!-- 冷色調：色相平移到互補色 + 略降飽和 -->
<img src="landscape.jpg" alt="風景"
     class="w-full h-64 object-cover rounded-xl
            hue-rotate-180 saturate-75 brightness-95">

三張圖示範同一組工具的不同排列。復古用 saturate-50 sepia brightness-90 contrast-110 疊出泛黃、褪色、略帶顆粒感的老照片味。霓虹反其道而行，saturate-200 contrast-125 brightness-110 把顏色推到最鮮豔、明暗最分明，適合夜景與潮流視覺。冷色調用 hue-rotate-180 把整片顏色旋轉到互補色再 saturate-75 收斂一點，做出科幻、清冷的氛圍。在 v4，這些 class 直接並列就會自動組合，不需要任何 filter 開關 class；若要更精細的自訂，也可用任意值 [filter:brightness(1.1)_saturate(1.3)] 一次寫死多重濾鏡。

v4 提醒：v3 中上述寫法必須改成 filter saturate-50 sepia brightness-90 contrast-110（前面要加 filter）才會生效。v4 移除了這個要求，遷移時可安全刪掉多餘的 filter class。

常見錯誤與最佳實踐

五個最容易踩的濾鏡坑

坑一：backdrop-blur 用在不透明背景上，完全沒有毛玻璃效果。 給了 backdrop-blur-lg 卻搭配 bg-white（純白不透明），白色會把後方完全遮住，你根本看不到被模糊的背景。根治法：毛玻璃的背景一定要半透明，用 bg-white/80、bg-black/40 這種 /alpha 寫法，並確保元素後方真的有內容可模糊。

<!-- ❌ 純白不透明背景，看不到任何模糊效果 -->
<div class="backdrop-blur-lg bg-white p-4">內容</div>

<!-- ✅ 半透明背景，後方內容透出、毛玻璃成立 -->
<div class="backdrop-blur-lg bg-white/80 p-4">內容</div>

坑二：在 v4 沿用 v3 的 filter 開關 class（無害但多餘），或反過來在 v3 忘記加。 v4 濾鏡工具自動組合、不需要 filter／backdrop-filter 前置 class；v3 則必須有。根治法：認清你的版本——v4 直接寫 blur-sm grayscale，把多餘的 filter 刪乾淨。

<!-- v3 寫法（前面要加 filter 才生效） -->
<img class="filter blur-sm grayscale brightness-90" src="...">

<!-- ✅ v4 寫法（更簡潔，自動組合） -->
<img class="blur-sm grayscale brightness-90" src="...">

坑三：對非矩形圖形用 shadow-*，陰影是方形的。 去背 PNG、SVG logo 用 shadow-*（box-shadow），影子會沿方形邊界而非圖形輪廓。根治法：非矩形圖形改用 drop-shadow-*（filter，跟隨實際輪廓）。

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

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

坑四：filter 建立新的 stacking context，z-index 失效。 只要套用任何 filter（甚至 blur-none 這種歸零值也算），元素就會建立新的 stacking context，子元素的 z-index 會被「關」在裡面、無法超出父層。根治法：需要跨層堆疊的元素，避免在其祖先上掛非必要的 filter，或重新規劃堆疊結構。

坑五：在動畫／捲動列表裡用 blur 或 backdrop-blur，畫面卡頓。 模糊是昂貴的運算，backdrop-blur 每次重繪都要把後方內容截圖再模糊；放在 animate-spin 或長列表每一列上，效能會很差。根治法：模糊用在靜態或少量元素上，理想上一個畫面的 backdrop-blur 元素控制在少數幾個，別在頻繁重繪的區塊濫用。

濾鏡最佳實踐清單

• 毛玻璃三件套：backdrop-blur-* + 半透明背景（bg-*/80）+ 後方要有可模糊的內容，缺一不可。
• 明暗調色記住「100 是原點」：brightness／contrast／saturate 往上加、往下減，-0 常是極端值。
• hover 濾鏡用過渡：grayscale hover:grayscale-0 transition-all duration-500，做出低成本的「活過來」效果。
• 多濾鏡直接並列：v4 中 saturate-50 sepia brightness-90 會自動組合，順序會影響最終結果。
• 非矩形陰影用 drop-shadow：SVG、去背圖的陰影要跟輪廓，別用矩形的 shadow-*。
• 濾鏡要節制：filter 有效能成本又建立 stacking context，避免用在動畫、長列表與大量元素上。
• 善用 backdrop-* 全家族：不只 backdrop-blur，backdrop-saturate-150 常搭配毛玻璃提升後方色彩、讓玻璃更通透。

小結

這是 TailwindCSS 完整教學 系列的第十九篇，延續 視覺樣式章（TW-4）。上一篇 《陰影與效果》 我們替版面點上光影、讓元素浮起立體；而這一篇替畫面裝上「鏡頭濾鏡」，讓你不改圖片檔本身就能即時調色、模糊、做出毛玻璃質感。回顧幾個重點：

• filter 系列：blur-*（模糊，v4 新增 blur-xs）、brightness／contrast／saturate（以 100 為原點的明暗與飽和）、grayscale／sepia／hue-rotate／invert（去色與色相），以及 drop-shadow-*（跟隨輪廓的陰影）。
• backdrop-filter 系列：backdrop-blur-* 等完整鏡射 filter，做出毛玻璃——記住三件套：backdrop-blur + 半透明背景 + 後方有內容。
• 濾鏡組合：v4 中多個濾鏡 class 直接並列即自動疊加，可組出復古、霓虹、冷色調等風格，grayscale hover:grayscale-0 是經典 hover 效果。
• 效能與陷阱：毛玻璃需半透明背景、filter 建立 stacking context 影響 z-index、模糊昂貴避免用在動畫與長列表、非矩形圖形用 drop-shadow 而非 shadow。
• v3 → v4 差異：濾鏡工具自動組合、不再需要 filter／backdrop-filter 開關 class、新增 blur-xs。

鏡頭裝好了，畫面的「顏色」與「清晰度」你都能隨心調校。但到目前為止，元素都還乖乖待在原本的位置與形狀——沒有旋轉、沒有縮放、沒有傾斜。下一篇 《變形 Transform》 會帶你掌握 scale（縮放）、rotate（旋轉）、translate（位移）、skew（傾斜）與 transform-origin（變形原點），讓元素動起來、翻起來、飛起來，替互動效果打下最後一塊基礎。