在前端 HTML 網頁製作上，CSS Filter 濾鏡效果（filter 屬性）是非常實用的視覺處理工具，共有 10 種內建函式可以單獨或組合使用，不需要請設計師重新出圖就能即時改變圖片色調、模糊度與陰影。
快速複製與 10 種濾鏡章節跳轉：
- ⚡ 最常用 4 大效果直達：1.
blur模糊霧化 ｜ 2.brightness亮度壓暗 ｜ 4.drop-shadow透明圖陰影 ｜ 5.grayscale灰階黑白- 🎨 色彩與特殊濾鏡直達：3.
contrast對比 ｜ 6.hue-rotate色相旋轉 ｜ 7.invert負片反白 ｜ 8.opacity透明度 ｜ 9.saturate飽和度 ｜ 10.sepia懷舊復古- 🧭 進階延伸專文：
- 想做「背景半透明毛玻璃（文字不模糊）」？➔ 參閱 CSS backdrop-filter 毛玻璃效果教學：blur 背景模糊語法與無效原因排查
- 想幫「去背透明 PNG / SVG 加陰影」？➔ 參閱 CSS drop-shadow 與 box-shadow 差別：去背透明圖片（PNG / SVG）陰影語法
如何使用 CSS Filter 濾鏡效果？（單一與多重疊加語法）
使用 CSS Filter 的標準屬性名稱為單數的 filter（極早期瀏覽器曾使用 -webkit-filter）。假設我們要讓圖片產生模糊、霧化效果，語法如下：
.css-filters-img {
filter: blur(5px);
}同時套用多種濾鏡效果（以空白分隔）
filter 屬性支援同時疊加多個濾鏡函式，只要在函式與函式之間用空白隔開即可（注意：中間不要加逗號）。例如同時套用「模糊 + 灰階黑白」：
.css-filters-img {
filter: blur(5px) grayscale(1);
}10 種 CSS Filter 濾鏡效果完整視覺圖解
以下使用同一張原始圖片，直接透過瀏覽器即時渲染對比「原始圖片」與「套用 filter 後的真實畫面效果」：
1. blur 模糊（霧化圖片）
讓圖片或元素產生高斯模糊效果，參數單位可使用 px、rem（不接受百分比），數值越大越模糊。常被用於未解鎖內容預覽或背景柔化。
.css-filters-img {
filter: blur(5px);
}
2. brightness 亮度（壓暗背景襯托白字 / :hover 增亮）
調整圖片或元素的明暗程度。1（或 100%）為原始亮度；小於 1（如 0.4）會將圖片壓暗（非常適合在 Banner 底圖壓暗後放上白色標題文字），大於 1（如 1.3）則會增亮。
/* 壓暗至 40% 亮度 */
.css-filters-img-dark {
filter: brightness(0.4);
}
/* 滑鼠移上時增亮至 130% */
.css-filters-img:hover {
filter: brightness(1.3);
}3. contrast 對比度
調整畫面明暗對比度。1（或 100%）為原始值；小於 100% 畫面會趨於灰平，大於 100% 則亮處更亮、暗處更暗。
.css-filters-img {
filter: contrast(200%);
}4. drop-shadow 貼合輪廓陰影（支援去背透明 PNG / SVG）
它與一般 box-shadow 最大的差別在於：drop-shadow 會穿透透明背景，自動偵測圖片內「非透明像素的真實輪廓」來產生陰影，而不會像 box-shadow 那樣在去背圖片外圍畫出一個難看的矩形黑框。（完整比較與氣泡尖角實作可參考 CSS drop-shadow 與 box-shadow 差別：去背透明圖片（PNG / SVG）陰影語法。）
.css-filters-img {
/* 語法：drop-shadow(水平位移 垂直位移 模糊半徑 陰影顏色) */
filter: drop-shadow(6px 10px 12px rgba(0, 0, 0, 0.55));
}5. grayscale 灰階（圖片變黑白效果）
將圖片或整個網頁轉換為黑白色調。數值介於 0 ～ 1（或 0% ～ 100%），1 為完全黑白。常被用於「已售完／停用狀態的商品卡片」或將彩色合作品牌 Logo 牆統一轉為灰階，滑鼠移上（:hover）再恢復彩色。
/* 預設轉為全黑白，滑鼠移上恢復原色 */
.partner-logo {
filter: grayscale(1);
transition: filter 0.3s ease;
}
.partner-logo:hover {
filter: grayscale(0);
}6. hue-rotate 色相旋轉
將元素的所有顏色依據色相環（Color Wheel）進行角度旋轉（0deg ～ 360deg），可用於動態變換圖示或漸層背景的色系。
.css-filters-img {
filter: hue-rotate(90deg);
}7. invert 負片反相（Dark Mode 純黑 Icon 反白技巧）
將顏色反轉，數值介於 0 ～ 1（或 0% ～ 100%）。在實務開發深色模式（Dark Mode）時，若圖示是以 img 標籤載入的純黑 PNG/SVG，只要加上 filter: invert(1);，就能瞬間將純黑圖示反轉為純白圖示，不必另外準備白色圖檔！
/* 深色模式下將純黑圖示反白 */
.dark-theme .icon-black {
filter: invert(1);
}8. opacity 不透明度
調整元素的不透明度，1（100%）為完全不透明，0（0%）為完全透明。作用與獨立的 CSS opacity 屬性相似，但放在 filter 中可與其他濾鏡函式串聯並交由硬體合成層處理。
.css-filters-img {
filter: opacity(0.4);
}9. saturate 飽和度（色彩鮮豔度）
調整色彩鮮豔程度。1（100%）為原始飽和度；設為 0 等同於灰階，大於 1（例如 2 或 250%）則會讓色彩變得更加濃郁鮮豔。
.css-filters-img {
filter: saturate(2.5);
}10. sepia 懷舊復古泛黃
替圖片覆蓋一層溫暖的棕褐色泛黃濾鏡，模擬復古舊照片風格。數值介於 0 ～ 1（或 0% ～ 100%）。
.css-filters-img {
filter: sepia(0.8);
}常見問題：filter: blur() 與毛玻璃 backdrop-filter: blur() 差在哪？
許多新手想做導覽列「半透明毛玻璃背景」，卻誤用了 filter: blur(8px)，結果導致導覽列裡面的文字與按鈕也全部一起糊掉無法閱讀：
filter: blur(8px)：會把「元素本身與裡面的所有子元素（含文字）」全部變模糊。backdrop-filter: blur(8px)：元素本身的文字保持清晰，只把「壓在元素背後的底圖與網頁內容」變模糊。
若要實作毛玻璃效果或排解 backdrop-filter 失效問題，請參考專文：CSS backdrop-filter 毛玻璃效果教學：blur 背景模糊語法與無效原因排查。
瀏覽器相容性與效能注意事項
| 瀏覽器環境 | Chrome / Edge | Firefox | Safari (macOS / iOS) |
|---|---|---|---|
filter 標準屬性 | Chrome 53+ / Edge 12+ | Firefox 35+ | Safari 9.1+ / iOS 9.3+ |
- 避免對大面積容器同時套用高半徑
blur：blur(20px)與drop-shadow需要即時計算周圍像素，若在滾動頁面上大量使用，容易造成行動裝置掉幀。 - 搭配
transition實現平滑切換：當用於卡片:hover灰階轉彩色或增亮時，加上transition: filter 0.3s ease;即可獲得流暢的漸變動畫。
發佈留言