批次模式下的浮雕風格產生器會從單一基底顏色、陰影距離、模糊半徑、對比百分比和圓角半徑產生一條一致的凸面 CSS 規則，然後在設計系統所需的任意數量元件上套用相同的推導方式。產生器會將所選基底的 RGB 色通道以相同百分比分別往黑色和白色混合，以產生較深的陰影和較亮的高光，然後將兩者放置在相等的正負偏移位置。由於元件集中每個浮雕表面都依賴父層共用該基底顏色，因此批次建置的重點在於重複使用一條規則，而非為每個元素猜測數值。CSS 浮雕風格產生器會讓預覽和複製的 CSS 保持同步：即時預覽中呈現的背景、半徑和 box-shadow 值，正是序列化到規則中的確切值，這讓它能安全地套用於按鈕、卡片、輸入框和提示工具，而無需手動重新調整每個實例，只要父層表面使用相符的顏色即可。
要求批次浮雕風格工作流程的團隊，通常指的是以下三種情況之一：每個元件都能匯入的設計權杖匯出、從單一基底顏色建置的一組相符卡片和按鈕，或在現有元件庫之上加入的懸停和高度圖層。每種情況都需要採取同樣的第一步——選擇單一基底顏色、產生一次凸面規則，然後在父層表面已共用該顏色的任何位置套用它。
批次浮雕風格從共用基底顏色開始
每個浮雕表面都取決於元素與其周圍區域之間的緊密關係。柔面錯覺只有在元件及其父層共用相同基底顏色時才會生效，因為兩個配對的陰影暗示的是深度，而非明確的邊框。當開發人員要求批次產生器時，他們通常需要一條可在單一主題內許多卡片、按鈕、輸入框和提示工具中重複使用的規則。因此，第一個決策並不是陰影距離或角半徑——而是每個父層都將使用的表面顏色。
一個典型的模式是為淺色主題挑選單一中性基底顏色（例如 #E0E5EC），為深色主題挑選另一個（例如 #2A2D34），然後將其標記為設計權杖。一旦該權杖存在，產生器的輸出就可以放入任何父層解析為相同顏色的元件中，錯覺會在整個介面中保持完整。如果父層使用不同的色調，浮雕元素會看起來像是一個無關的灰色方塊疊在頁面上，這是批次產生失敗的最常見原因。
五個步驟產生凸面 CSS
開啟 CSS 浮雕風格產生器，依序完成以下五個步驟，就能產生一條可貼到許多元件中的規則。
- 選擇元件及其周圍區域所使用的表面顏色。使用設計權杖的六位數十六進制值。
- 調整成對的陰影距離、模糊和對比，直到預覽呈現為柔軟的凸面平板，而非扁平矩形。
- 設定圓角半以符合主元件系統。卡片的圓角通常大於按鈕或輸入框。
- 在元件實際呈現的大小下，針對實際的父層背景顏色檢視凸面預覽。
- 複製 CSS，然後在主程式碼庫中新增語意狀態、焦點指示和無障礙檢查，再進行合併。
產生器會驗證基底顏色為完整的六位數十六進制值、距離、模糊和半徑為非負有限數，以及對比百分比位於設定的範圍內。空白的數值輸入屬於錯誤而非無聲的零，因此不小心清除並不會默默地產生一個看不見的表面。所有處理都停留在當前的瀏覽器分頁中，不會上傳或儲存任何值，也不需要帳號或套件。
輸入、偏移及其產生的值
一個簡短的參考表格能幫助團隊在許多元件之間保持相同的設定，避免漂移。
| 控制項 | 設定內容 | 對規則的影響 |
|---|---|---|
| 基底顏色 | 一個六位數十六進制值 | 設定元素背景以及兩個衍生陰影的來源 |
| 陰影距離 | 相等的正負偏移 | 將深色陰影向右下移動；將淺色高光向左上移動 |
| 模糊 | 邊緣柔和度 | 以相同程度柔化兩個陰影 |
| 對比 | 色通道分離百分比 | 將衍生的陰影顏色以相同程度往黑色和白色移動；不改變不透明度 |
| 圓角半 | 元素圓角 | 在同一宣告中套用為 border-radius |
對比控制的是每個衍生陰影色與基底顏色之間的距離，而不是不透明度。較高的百分比會在基底與陰影之間產生更強的分離，但也會很快看起來不再細緻。色通道計算會四捨五入為有效的八位元十六進制值，因此衍生陰影會保持在有效的顏色通道範圍內。陰影距離以單一值同時設定水平和垂直偏移，這在建構上就讓兩個配對陰影保持對稱。
單一基底顏色的計算範例。以對比 15 百分比取 #E0E5EC。產生器會將每個色通道往黑色混合 15 百分比以衍生較深的陰影，並將每個色通道往白色混合 15 百分比以衍生較亮的高光：
- 較深：224 × 0.85 ≈ 190，229 × 0.85 ≈ 195，236 × 0.85 ≈ 201 → #BEC3C9
- 較亮：224 + (255 − 224) × 0.15 ≈ 229，229 + (255 − 229) × 0.15 ≈ 233，236 + (255 − 236) × 0.15 ≈ 239 → #E5E9EF
這兩個衍生顏色在每個色通道上大約相距 38 到 39 個通道，這就是使用者實際看到的視覺分離。相同的計算會在瀏覽器分頁中以確定性的方式執行，因此相同的輸入永遠會產生相同的十六進制值。將這些衍生顏色搭配約 10 的陰影距離和約 20 的模糊，可獲得柔軟的凸面平板，或將距離推向零以獲得幾乎平坦、帶有淡淡內環的表面。當元件在懸停或按下時需要額外的深度，請使用批次 box-shadow 產生器方法在其上疊加第二條規則，而不是為每個元件重新調整基底規則。
凸面、按下、焦點和停用：分開的規則
產生器只會產生凸面狀態。內凹控制項、按下狀態、焦點環和停用狀態需要另外明確的規則。凸面按鈕和按下內凹按鈕對於低視力使用者來說可能難以區分，當唯一的差異是陰影方向時更是如此，因此每個互動式浮雕元件至少需要四個不僅依賴陰影即可區分的狀態。
| 狀態 | 來源 | 無障礙說明 |
|---|---|---|
| 凸面（預設） | 產生器輸出 | 設定為批次主題的靜止狀態 |
| 懸停 | 主程式碼庫 | 使用權杖化的陰影轉場，而非持續動畫模糊 |
| 按下／內凹 | 主程式碼庫 | 在無陰影的情況下仍可區分；考慮使用邊框或權杖變更 |
| 焦點 | 主程式碼庫 | 新增明確的焦點外框，使其能在強制色彩模式下保留 |
| 停用 | 主程式碼庫 | 降低不透明度並移除互動提示 |
| 錯誤／無效 | 主程式碼庫 | 透過顏色和標籤溝通，而非僅仰賴陰影方向 |
強制色彩和高對比模式可能會捨棄裝飾性陰影，因此底層的語意元素和狀態必須在沒有陰影的情況下仍可理解。MDN box-shadow 參考是底層語法和偏移行為的可靠來源，每當產生的值需要手動調整時都可參考。多個大型模糊陰影也可能增加捲動清單或動畫表面的繪製成本，因此請將效果控制在少數穩定元素上，並在廣泛推出前測試具代表性的行動裝置。
將規則整合進設計權杖系統
單次產生器執行很少是批次工作流程的最終步驟。下一步是將複製的 background、border-radius 和 box-shadow 值放在具名權杖之後，例如 --surface-raised、--surface-radius-md 和 --shadow-neumorphic-raised。每個想要該效果的元件接著就能參考這些權杖，而非重複使用原始值，這讓未來重新執行產生器時只需在一個地方編輯。
該推出的簡短檢查清單：
- 將父層表面與產生器中使用的相同十六進制值對齊，可以將產生的背景複製到目標表面，或將其取代為解析為相同顏色的現有設計權杖。
- 將元件庫中任何一次性的值取代為新權杖，以便下次從單一位置更新規則。
- 將語意狀態、焦點指示和無障礙檢查新增為以相同權杖為鍵的分開規則。
- 在合併前檢查淺色和深色主題、縮放、強制色彩模式以及具代表性的行動裝置。
- 如果狀態轉場會動畫陰影或變形，請遵守減少動畫偏好設定。
如果元件需要變更高度，請優先使用簡短的變形或權杖化的陰影轉場，而非持續動畫模糊值。產生的規則不包含轉場、懸停移動、字型、間距或版面配置，因為這些屬於主元件系統。裝飾性深度絕不應造成版面位移或隱藏載入和錯誤狀態，因此請在各狀態之間保持元素的可見邊界可預測。產生器會驗證 CSS 導向的範圍並產生確定性的顏色，但它無法在實際產品中認證對比、視覺層級、瀏器呈現或效能，因此請將規則複製到測試元件中，並在合併前驗證上述四個互動狀態。
相關閱讀：批次文字陰影產生器：產生可稽核的圖層。