新擬物風格的凸起表面是由單一基礎顏色、一對較深的陰影與較亮的高光置於相等但相反的偏移量上，以及一個同時柔化兩側邊緣的模糊效果所產生。深度幻象來自那兩個陰影與其背後元素共享同一個表面顏色，這就是為什麼大多數現成的新擬物工具在自己的展示頁面上看起來都正確，但一放進實際版面就立刻崩壞的原因。一個可靠的 CSS 新擬物產生器替代方案必須把表面顏色、偏移距離、模糊、對比，以及圓角視為同一個計算，讓預覽與複製出來的程式碼都共用這個計算，這樣你在螢幕上看到的與實際套用到元素上的才會完全一致。它也應該拒絕無效的輸入、以混和 RGB 色通道的方式向黑色與白色靠攏，而非依賴透明度的技巧，並在任何衍生顏色送到你的樣式表之前都將其四捨五入為有效的 8 位元十六進位值。CSS 新擬物產生器就是依據這個契約打造的：每個滑桿都有界定的範圍，每個空白的數值輸入都會被視為錯誤而非靜默的零，而預覽則與最終序列化進規則中的背景、半徑，以及 box-shadow 值使用同一組設定。
為什麼大多數新擬物產生器只能停留在漂亮的圖片階段
第一波新擬物工具仰賴單一的視覺技巧：兩個重疊的 box-shadow 宣告,一個深色、一個淺色,偏移與模糊都是憑感覺挑選。這個做法在孤立環境中看起來很整齊,但一旦程式碼片段離開測試環境,就會暴露出三個問題。陰影顏色通常直接選用原始的灰色,設計師一旦更換上層背景,卡片就會突然變成一個漂浮的灰色矩形。這些數值沒有範圍限制,代表負的模糊、零偏移,以及非十六進位的顏色都可能成為合理的輸出。而元素與表面之間的對比完全透過陰影方向傳達,讓按下狀態、聚焦外框,以及停用的控制項在沒有額外處理時無法區分。
一個更嚴謹的產生器替代方案必須將基礎顏色視為唯一的真相來源,根據該基礎以可控的幅度衍生出深色與淺色陰影顏色,將這兩個陰影置於相等且相反的偏移量,並拒絕任何會產生無效 CSS 值的組合。重點不僅在於輸出更漂亮;而是複製的規則就是實際渲染的規則、數值是可預測的,並且元件系統的其他部分可以在不繼承脆弱視覺技巧的情況下,疊上聚焦、按下,以及停用狀態。
CSS 新擬物產生器如何建立平衡的表面
這套工具背後的實作方法刻意保持精簡。它會驗證一個六位數的基礎顏色以及一組有限的界域幾何,接著根據你選擇的對比百分比,將該基礎的紅、綠、藍色通道對稱地向黑色與白色混和。深色陰影是以每個通道乘上 (1 − 對比) 計算;淺色高光則是以每個通道乘上 (1 − 對比) 再加上 對比 × 255。兩個衍生顏色都會被四捨五入為有效的 8 位元整數並序列化為十六進位,因此輸出永遠是 CSS 解析器能接受的格式。接著陰影距離會以相等的正偏移套用至深色陰影(下與右),並以相等的負偏移套用至淺色高光(上與左),模糊值則以相同的量同時柔化兩側邊緣。
對比是色通道混和的百分比,而非透明度。提高它會把衍生顏色推離基礎更遠,進而增加分離感但很快就不再顯得細膩,因此工具將其暴露為單一百分比,而不是讓你手動調整兩個獨立的陰影顏色。由於預覽使用的背景、半徑,以及 box-shadow 值,與複製出的 CSS 中所回傳的值完全相同,因此即時預覽與你貼進樣式表的規則之間不會有任何落差,而這正是產生器替代方案能比從螢幕擷圖複製程式碼更安全的結構性原因。
下表摘要說明每個控制項如何對應到底層的 CSS。行為是奠基於產生器的契約,而非從類別慣例推論而來。
| 控制項 | 受影響的 CSS 屬性 | 行為 |
|---|---|---|
| 基礎顏色(六位數十六進位) | 元素與上層表面的背景 | 唯一的真相來源;深色與淺色陰影顏色皆由其衍生。 |
| 陰影距離 | 兩個陰影的 offset-x 與 offset-y(等量、反向) | 深色陰影向右下移動;淺色高光向左上移動。 |
| 模糊半徑 | 兩個陰影的模糊值 | 以相同的量柔化兩側邊緣。 |
| 對比百分比 | 透過 RGB 色通道混和衍生陰影顏色 | 較高的百分比會把衍生顏色推離基礎更遠,而不是降低不透明度。 |
| 圓角 | 元素的 border-radius | 使用複製出的 CSS 中回傳的同一個值來圓滑四個角。 |
四步打造新擬物卡片
產生器依循四個有序步驟,反映計算的組成方式。把它們當作檢查清單,複製出來的規則就能與預覽的表現完全一致。
- 挑選元件與其周圍區域所使用的表面顏色。選取一個六位數的十六進位值,將其設為卡片的背景,並把同一個顏色套用至上層表面,讓兩個陰影能在沒有可見邊框的情況下暗示深度。
- 調整成對的陰影距離、模糊與對比。將偏移設為小的正數,例如 6 或 8 像素,模糊設在大約半個到整整一個偏移之間,並且只在深色與淺色陰影勉強可辨識時提高對比百分比。再往上加很快就會失去細膩感。
- 設定圓角並檢視凸起的預覽。挑選一個與設計系統其餘部分相符的半徑,然後在元素與上層都設定好表面顏色的情況下觀察預覽。預覽與實際序列化的值是連動的,因此任何視覺變化都應對應到單一的 CSS 編輯。
- 複製 CSS,接著加入語意狀態、聚焦指示,以及無障礙檢查。將規則貼進實際元件中,加上明確的聚焦外框、為按下狀態加入獨立的 inset 或邊框規則,並在出貨前於強制色彩模式以及你預期最大的字級下驗證表面。
為了讓機制更具體,以下是一個所有數值都已代入的完整範例。從基礎顏色 #C8D0DC 開始,其解碼為紅 200、綠 208、藍 220。將對比設為 10 個百分點時,深色陰影通道為 基礎 × (1 − 0.10) = 基礎 × 0.90:紅 200 × 0.90 = 180,綠 208 × 0.90 = 187.2 四捨五入為 187,藍 220 × 0.90 = 198。四捨五入為十六進位,深色陰影為 #B4BBC6。淺色高光通道為 基礎 × 0.90 + 255 × 0.10:紅 180 + 25.5 = 205.5 四捨五入為 206,綠 187.2 + 25.5 = 212.7 四捨五入為 213,藍 198 + 25.5 = 223.5 四捨五入為 224,序列化為 #CED5E0。將其與距離 8、模糊 16 搭配,複製出的規則便成為 box-shadow: 8px 8px 16px #B4BBC6, -8px -8px 16px #CED5E0;,其中深色陰影位於正偏移,淺色高光位於負偏移。
對齊上層背景,否則效果就會失效
新擬物風格仰賴元素與其周圍表面之間的緊密關係,而這單一限制正是大多數即貼即用程式碼片段出錯的地方。新擬物卡片通常使用與其上層相同的基礎顏色,讓兩個陰影能在沒有可見邊框的情況下暗示深度。如果上層背景不同,元素看起來就像不相干的灰色方塊,整個柔和表面的幻象也會隨之瓦解。因此產生器會回傳單一背景值,讓預覽與複製出的 CSS 共用,實際建議是要把該背景複製到目標表面上,或以解析為同一顏色的現有設計權杖來取代它。把基礎顏色視為權杖而非一次性數值,讓淺色與深色主題能在不重寫陰影規則的情況下交換它。
同樣的邏輯也適用於分層。如果卡片放在背景略為不同色調的區塊內,無論陰影多麼柔和,眼睛都會把邊界讀成硬邊。要嘛精確對齊上層,要嘛僅僅把對比調高到足以讓陰影組承擔分離的程度。這也是為什麼這套工具從單一基礎衍生深色與淺色陰影顏色,而不是要求兩個獨立的十六進位值:一對不匹配的顏色是失去柔和 UI 質感的最快方式。
超越柔和陰影的無障礙、狀態與強制色彩
新擬物風格存在重要的無障礙限制,而產生器並不試圖掩飾它們。低對比屬於視覺風格的一部分,但控制項仍然需要明確的邊界、可讀的標籤、可見的鍵盤聚焦,以及不能只透過陰影方向傳達的狀態。凸起按鈕與按下凹陷按鈕對低視力使用者來說可能難以區分,因此建議的模式是加上明確的聚焦外框、為按下狀態加入邊框或更強的色彩分隔,以及不單獨依賴陰影反轉的圖示或標籤變更。強制色彩與高對比模式可能會捨棄裝飾性陰影,這代表底層的語意元素及其狀態必須在沒有這些陰影的情況下仍然能被理解。
下方的無障礙限制奠基於產生器的契約,值得視為預設值而非可選的修飾。
| 限制 | 為何重要 | 實際的緩解方式 |
|---|---|---|
| 元素與表面之間的低對比邊界 | 僅靠陰影的分離在低視力螢幕或低品質顯示器上可能會消失。 | 將柔和陰影與邊框或更強的色彩分隔搭配使用。 |
| 按下與凸起狀態難以區分 | 僅靠陰影方向並非可靠的狀態信號。 | 為按下狀態加入獨立的 inset 規則、圖示變更或標籤變更。 |
| 強制色彩可能會去除裝飾性陰影 | 高對比模式會忽略作者裝飾的 box-shadow。 | 確保語意 HTML、可見的聚焦,以及在強制色彩下仍存活的狀態顏色。 |
| 鍵盤聚焦在柔和表面上不可見 | 預設外框可能會融入單一顏色的表面。 | 套用與基礎顏色對比足夠的明確聚焦外框。 |
效能、隱私與生成式 CSS 的限制
產生器僅產出浮起狀態。內凹控制項、按壓狀態、焦點環與停用狀態需要另行撰寫明確的規則,而此工具並不會新增轉場、懸停移動、字體排版、內距或版面配置,因為這些屬於宿主元件系統的職責。若元件需要改變海拔高度,建議採用簡短的 transform 或以代幣化的陰影轉場,並尊重減少動畫的偏好。多個大型模糊陰影會增加繪製成本,特別是在捲動清單或動畫介面中,因此效果應僅套用於少數穩定的元素上,陰影模糊不應持續進行動畫,且在上線前應在具代表性的行動裝置上進行量測。
所有處理皆在目前的瀏覽器分頁中完成。不會上傳或儲存任何數值,不需要帳號,也不會安裝任何套件。此工具會驗證 CSS 相關的範圍並產出確定性的色彩,但無法為真實產品中的對比、視覺層級、瀏覽器渲染或效能提供認證。正確的工作流程是:將規則複製到測試元件中,比對父層表面,加入語意化 HTML 與焦點行為,檢查淺色與深色主題、縮放、強制色彩模式以及行動裝置效能,接著調整設計代幣而非散佈零散的值。底層的 box-shadow 屬性遵循 MDN box-shadow 參考文件中所描述的語法,因此您日後新增的任何自訂狀態都能與產生器所產出的規則保持相容。
相關閱讀:CSS 對話泡泡產生器替代方案:純 CSS 尾巴。
相關閱讀:CSS 條紋圖樣:使用重複漸層打造。