CSS Filter 濾鏡 &
Blend 混合模式產生器
視覺化組合 CSS 濾鏡與混合模式，快速產生程式碼並可將特效直接存成圖片。
預設集
* 拖曳左側的 [≡] 圖示可以改變濾鏡的套用順序。
預覽
產生的 CSS
Tailwind CSS
關於 CSS Filter & Blend 產生器
CSS Filter & Blend 產生器是一款免費的網頁開發者工具，能讓您以視覺化的方式，組合並測試強大的 CSS 影像處理屬性：filter、backdrop-filter 以及 mix-blend-mode，並幫您自動產生程式碼。就像在使用修圖 App 一樣，只要在瀏覽器中操作滑桿，就能打造多樣的影像特效並直接應用到您的網站上。
您無需開啟 Photoshop，純粹使用 CSS 就能重現亮度調整、模糊、復古褐色濾鏡，甚至正片疊底 (Multiply) 或濾色 (Screen) 等圖層混合效果。您可以隨意新增濾鏡、拖曳改變濾鏡順序，並即時預覽變化。新版本更支援產生 Tailwind CSS 類別，您甚至可以一鍵將調整好的預覽畫面下載為高畫質 PNG 圖片。
使用方法
設定預覽圖片與畫布
點擊「變更圖片」從您的電腦或手機中載入圖片做為預覽。圖片僅在瀏覽器內顯示，絕不會上傳，非常安全。您也可以根據專案需求設定畫布比例與外框圓角。
套用濾鏡與變更順序
選擇您要加入的濾鏡種類 (例如模糊或對比)，點擊「新增」後透過滑桿調整數值。您可以按住左側的把手拖曳，藉由改變濾鏡的順序來微調最終的視覺效果。
複製程式碼或儲存圖片
滿意後，即可將右下方產生的標準 CSS 或 Tailwind CSS 複製並貼入專案中。如果您需要直接使用圖片素材，點擊「儲存圖片」即可透過 Canvas 技術將濾鏡結果匯出為圖片檔案。
CSS Filter 相關名詞解釋
- filter (影像濾鏡)
- 直接將視覺特效套用在元素 (通常是圖片) 本身的 CSS 屬性。可以同時指定多種函數 (如 blur, brightness 等)，彼此以空白分隔，瀏覽器會依照從左到右的順序依次處理。
- backdrop-filter (背景濾鏡)
- 將濾鏡特效套用在該元素「背後」的區域。為了看見效果，元素本身必須帶有半透明的背景色。這是在現代網頁設計中實作「毛玻璃效果 (Glassmorphism)」不可或缺的屬性。
- mix-blend-mode (混合模式)
- 定義元素如何與其下方的背景圖層進行顏色混合。概念等同於 Photoshop 裡的圖層混合模式，可用來創造色彩增值 (multiply)、濾色 (screen)、覆蓋 (overlay) 等豐富的色彩交互效果。
- Tailwind CSS
- 一種 Utility-first 的 CSS 框架。透過本工具，您可以將複雜的濾鏡組合一鍵轉換為簡潔的 class 名稱，例如
backdrop-blur-md或mix-blend-multiply，大幅加快開發速度。
常見問題
- Q.上傳的圖片會被儲存到伺服器嗎？
- 不會。上傳功能僅用於在您的瀏覽器 (本地環境) 內顯示預覽，圖片資料絕對不會傳送到任何外部伺服器，運作完全安全且等同於離線使用。
- Q.filter 和 backdrop-filter 有什麼差別？
- `filter` 屬性會直接將特效應用在元素 (如圖片) 本身；而 `backdrop-filter` 則是將特效應用在元素「背後」的內容上。如果您想要實作模糊背景並在前方放置文字的 UI (如毛玻璃效果)，就必須使用 `backdrop-filter`。
- Q.為什麼改變濾鏡的順序，效果沒有變化？
- 某些組合 (例如對比度 Contrast 和亮度 Brightness) 的順序差異在視覺上可能非常微小。但是，像「模糊 Blur」然後「對比 Contrast」的組合，就會產生邊緣銳利化等明顯差異。您可以多多嘗試不同的順序。
- Q.無法順利下載產生的圖片怎麼辦？
- 如果您從外部 URL 載入圖片，可能會因為瀏覽器的 CORS (跨來源資源共用) 安全策略而無法匯出 Canvas。請嘗試點擊「變更圖片」直接從您的裝置上傳圖片檔案後再試一次。
使用場景
打造毛玻璃 (Glassmorphism) UI
將浮動視窗或導覽列的背景設定為半透明，並加上 backdrop-filter 模糊處理，就能輕鬆實作出類似 iOS 或 macOS 那種現代、帶有深度感的 UI 介面。
首頁大圖 (Hero Header) 處理
當需要在背景圖片上疊加白色文字時，直接使用濾鏡稍微降低背景圖的亮度 (Brightness) 或加上微小模糊 (Blur)，可以完美兼顧文字閱讀性與圖片美感。
滑鼠懸停 (Hover) 動態互動
您可以設定圖片在一般狀態下為灰階 (Grayscale)，當滑鼠懸停時再切換為全彩並增加飽和度。這對於製作動態作品集或相簿預覽非常有幫助。
深色模式 (Dark Mode) 圖片適應
當使用者的作業系統切換至深色模式時，如果圖片過於刺眼，可以搭配媒體查詢稍微調低亮度，或套用非常輕微的褐色濾鏡，以減輕視覺疲勞。
技術規格與細節
濾鏡「順序」的重要性
使用 CSS 濾鏡時最大的技術關鍵在於「順序」。舉例來說，filter: saturate(200%) blur(5px); 與 filter: blur(5px) saturate(200%); 的渲染結果會有微妙差異。前者是先將顏色增豔後再模糊化，後者則是將模糊後的漸層顏色增豔，有時候會導致邊緣看起來不同。
本工具提供的拖曳排序功能，正是為了解決這個問題，讓您能即時比較不同順序產生的視覺變化。
硬體加速與 Canvas 匯出技術
CSS 濾鏡效果主要是透過裝置的 GPU (硬體加速) 來進行高速渲染，這比傳統伺服器端處理圖片後再回傳的效能要好上許多。
此外，本站的「儲存圖片」功能使用了 HTML5 Canvas 2D API，並透過 globalCompositeOperation 來精確模擬瀏覽器的 CSS 濾鏡渲染機制，將每一顆像素忠實計算後，匯出成無損的 PNG 圖檔供您直接使用。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.