批次毛玻璃木風工作流程是一組協調的霧面玻璃面板 — 每個面板都調整了各自的背景模糊、半透明填色、高光邊框和圓角半徑 — 共享同一種設計語言，並以 CSS 規則的形式一起發布。CSS 毛玻璃木風產生器 透過一次產生一條經過驗證的規則來支援此工作流程：挑選玻璃顏色、設定不透明度、調整背景模糊、選擇白色邊框不透明度，並挑選圓角半徑，然後將產生的宣告複製到你的樣式表中。重複執行產生器，使用共享的色彩系列和相符的範圍，即可將此工具轉變為圖樣集產生器，而非單一卡片的玩具。所有運算都在瀏覽器本地進行，因此不需要上傳，也不需要帳號；反覆調整面板、複製 CSS、貼到 token 檔案中，再回頭調整下一個項目。輸出使用標準的 backdrop-filter 以及加上 WebKit 前綴的 fallback、半透明的 rgba 背景、一像素的高光邊框，以及 border-radius，並刻意省略陰影、內距、定位和字體設定，讓每條規則都能乾淨地融入你現有的元件系統。
使用單一面板工具定義批次工作流程
CSS 毛玻璃木風產生器沒有佇列、沒有批次輸入欄位，也沒有全部匯出按鈕 — 而這正是刻意為之。產品合約記載的是單一面板工作流程：一種玻璃顏色、一個填色不透明度、一個模糊值、一個邊框不透明度、一個半徑。因此批次輸出就是你要執行的迴圈：開啟預覽、調整一面板、複製規則、記錄數值，然後重複。這種紀律的好處在於，每個面板都會依據 W3C Filter Effects Level 1 規範中記載的相同有限範圍和文法規則進行驗證。代價在於設計一致性是你的責任 — 工具不會強制面板二與面板一相符。
把這個迴圈視為設計系統練習，而不是一次性卡片。列出你實際需要的一小組面板：一張主要卡片、一張次要卡片、一個模態背景、一個工具提示，以及一個導覽藥丸。決定哪些值得使用獨特的模糊值，哪些可以共用。然後針對清單中的每一列執行一次產生器。結果是一小組具名的 CSS 規則，你可以貼到 token 檔案或設計系統頁面中，而不是一堆無關的宣告。
在開始之前設計 Token 集
產生器會驗證每個控制項的有限範圍，但不會幫你挑選數值。在開啟預覽之前，先決定四件事：
- 填色不透明度分級。選擇一個窄範圍 — 例如 18 percent、24 percent 和 32 percent — 而不是為每個面板使用獨特的 alpha。維持兩到三個分級有助於保持視覺節奏一致。
- 背景模糊分級。較大的模糊數值不一定是更好的效果。小面積從 8 pixels 開始，卡片從 12 到 16 pixels，並避免在行動裝置硬體上超過 24 pixels。
- 邊框不透明度。邊框是一像素的白色，使用選定的透明度。挑選一個數值（通常為 30 到 50 percent），並在整組中重複使用，讓每個面板看起來都是相同的材質。
- 圓角半徑。決定你的組合是方角、稍微圓角，還是完全圓角，並堅持使用一到兩個半徑。產生器會將半徑驗證為非負的像素長度。
把這些分級記錄在便利貼上或 token 檔案中。它們會成為你在視覺產生器中為每個面板重複使用的配方。
在視覺產生器中產生每個面板
針對組合中的每個面板執行下列工作流程。每次通過都會產生一條經過驗證的 CSS 規則，使用相同的控制項和文法。
- 挑選玻璃顏色。此工具接受六位數十六進位數值，並將其轉換為紅、綠、藍通道。從你的 token 調色盤中挑選；不要為每個面板發明新顏色。
- 設定半透明填色不透明度。使用分級清單中的百分比 — 例如主要卡片使用 24 percent。該工具會將此百分比轉換為最終 rgba 宣告中使用的穩定 alpha 值。
- 調整背景模糊。輸入模糊分級內的非負像素長度。該工具會拒絕負值，因為它們在 filter 文法中是無效的，而不是悄悄修正它們。
- 設定高光邊框不透明度。邊框不透明度與填色不透明度分開計算，因為細微的淺色邊緣有助於將面板與其後方的材質區分開來。
- 挑選圓角半徑。從你的半徑分級中輸入非負的像素長度。產生器會將其直接序列化為 border-radius。
- 在內建彩色背景上檢查面板。預覽會將面板放在彩色背景上，這樣才能看到背景效果 — 這能避免在純色背景上判斷模糊效果的常見錯誤，因為在純色背景上瀏覽器沒有東西可以濾鏡。
- 複製 CSS。輸出已可直接貼上。在針對下一個面板重複執行迴圈之前，請先在實際的堆疊環境中測試。
產生器會輸出什麼，以及省略什麼
輸出刻意保持精簡。以下是產生器為你寫入的內容，以及你應該透過自己的元件系統新增的內容的對照。
| 屬性 | 由工具產生 | 省略的原因 |
|---|---|---|
| background（半透明 rgba） | 是 — 使用轉換後的十六進位顏色和計算出的 alpha | 顏色和 alpha 是面板的工作 |
| backdrop-filter | 是 — 標準形式加上 WebKit 前綴的 fallback | 模糊效果定義了玻璃材質 |
| border | 是 — 指定不透明度的一像素白色邊框 | 細微的邊緣可將面板與背景區分開來 |
| border-radius | 是 — 以像素長度表示的圓角半徑 | 圓角是玻璃外觀的一部分 |
| box-shadow | 否 | 陰影屬於周圍的設計 token |
| padding | 否 | 內距屬於佈局元件 |
| position / top / left | 否 | 定位屬於父容器情境 |
| font / typography | 否 | 字體屬於全域字型系統 |
在自有樣式表中新增陰影、內距和定位，可以避免面板形成獨立的視覺語言，並讓多個面板共用相同的 token。
在實際堆疊環境中測試批次組合
在隔離預覽中看起來正確的規則，在實際頁面上可能看起來不同。MDN 的 backdrop-filter 參考資料指出，backdrop-filter 屬性會取樣繪製在元素後方的像素 — 而不是其本身的子元素 — 而由上層的不透明度、濾鏡、遮罩、裁剪、混合或特定的 will-change 值所建立的 backdrop root，可能會限制取樣的背景。因此，組合中的每個面板都需要針對其所屬的實際父容器進行測試。
組合的實用檢查：
- 驗證每個面板的透明度。完全不透明的面板會隱藏背景，使模糊看起來無效，即使屬性本身有效也是如此。如果面板看起來很平，請降低 alpha 分級，而非提高模糊值。
- 檢查文字在各種背景下的對比度。毛玻璃木風不保證文字可讀。請在使用者可達到的最淺、最深、最繁忙的背景上測試每個面板，並在對比不足之處加上更不透明或實心的 fallback。
- 驗證鍵盤焦點和強制色彩。淺色邊框並非無障礙的保證。請在元件 CSS 中加上明確的焦點指示器，並在強制色彩模式下測試面板。
- 新增 fallback 背景。當不支援背景濾鏡、將其停用，或被降低透明度偏好設定覆寫時，面板需要實心或更不透明的背景，以確保內容仍可見。
- 在具代表性的硬體上測量效能。模糊會帶來渲染成本，特別是在大型、移動中或巢狀的表面上。請將濾鏡區域限制在合理範圍內，並確認中階行動裝置上的捲動順暢。
為什麼組合中的面板會消失或看起來平淡
當組合中的面板行為異常時，原因通常是一小組眾所周知的問題之一。
| 陷阱 | 你看到的現象 | 修正方式 |
|---|---|---|
| 完全不透明的填色 | 模糊看起來無效 | 將 alpha 降低至分級範圍內的半透明值 |
| 輸入負的模糊值 | 產生器拒絕該值 | 使用模糊分級內的非負像素長度 |
| 繁忙的背景 | 文字和影像會透出來 | 為該表面加上更不透明或實心的 fallback 背景 |
| 由父容器建立的 backdrop root | 效果在複雜佈局中消失 | 在提高模糊值之前，先檢查透明度和 backdrop-root 邊界 |
| 不一致的色彩系列 | 組合看起來像無關的卡片 | 從相同的十六進位調色盤重新衍生每個面板 |
| 隨意新增的陰影 | 面板與其餘設計格格不入 | 將陰影移至共用的元件 token |
一旦組合通過這些檢查，就把收集到的規則貼到 token 檔案、CSS layer 或設計系統文件頁面中。兩到六個面板的協調組合即可涵蓋大多數產品介面 — 主要卡片、次要卡片、模態、工具提示、導覽藥丸 — 而不會膨脹 bundle。
延伸閱讀：如何製作具有精確停止點順序的 CSS 漸層。