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 圖檔供您直接使用。
發送反饋/請求
發送反饋
請告訴我們您的想法，以幫助我們改進工具。
這不是工具的輸入欄位
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.