一種 neumorphism 產生器的 API 替代方案，是一款在瀏覽器中運作的工具，能從單一基準色產生一對搭配的柔和 UI 陰影與相符的表面背景，而不需將數值傳送至遠端端點。它不整合託管服務、不需要付費選用方案或管理 API 金鑰，所有色彩混合與驗證作業都在您正在瀏覽的網頁中完成。您只需提供一組六位數基準色、陰影距離、模糊半徑、對比百分比與圓角半徑，工具會將每個色道朝黑色混合以產生較深的陰影，並將相同的色道朝白色混合以產生較亮的高光，接著將兩者以相等的正負偏移放置，並回傳一個可直接複製的 CSS 宣告，包含背景值與 box-shadow 清單。預覽採用完全相同的數值，因此您複製的內容與所見完全一致。所有數值皆在您的瀏覽器內處理，不會有任何檔案或色彩字串離開分頁，無需任何帳號，也不會在專案中安裝任何東西。最終會得到一個可直接套用的柔和 UI 表面，在您確認上層背景一致並加入 focus、hover 與 pressed 狀態後，即可貼入實際元件中。
本機產生器如何取代 API 端點
託管式的 neumorphism 端點看似便利，卻以額外的網路往返換取控制權。本機產生器則能移除該往返，讓您以 DOM 的速度反覆調整。
- 不需金鑰或配額。由於不需向第三方驗證，因此即使權杖外洩、計費變更或服務下線，也不會打斷您的設計流程。
- 沒有網路延遲。色彩混合與陰影組合會在同一個繪製畫格內完成，這在您反覆拉動對比滑桿、尋找最柔和且仍可辨識的數值時特別重要。
- 無需上傳設計權杖。您的基準色與品牌色盤都留在分頁內。若想確認，可參考CSS Neumorphism 產生器是否會將任何資訊傳送至伺服器這篇文章；該篇的答案同樣適用於此處。
- 無需維護 SDK。整合方式僅需在樣式表中貼上一段。當產生器的規範變更時，由於您從未依賴函式呼叫，您的程式碼並不會因此損壞。
- 沒有版本漂移。由您自行決定何時重新產生。API 可能在一夜之間推出破壞性變更；而隨需造訪的瀏覽器工具則不會。
/dev/css-neumorphism-generator/ 上的 CSS Neumorphism 產生器正是實作了此一規範：受限的數值輸入、六位數色彩字串、決定性的色道運算，以及可複製的宣告。本文接下來將說明如何操作它，以及輸出結果的保證。
使用瀏覽器產生器打造柔和立體表面
- 選取將與父元件共用的基準色。柔和 UI 只有在元件本身與其背景顏色相同時才能正確呈現。請選擇一個六位數的十六進位色碼，例如 #e0e6f0；它將同時作為元件的背景，以及陰影混合的基準。
- 設定陰影距離。此單一數值會同時控制兩個陰影的水平與垂直偏移。較小的距離會讓表面貼近背景；較大的距離則會明顯抬起表面，但不需透過動畫呈現。
- 設定模糊半捤。模糊會同時柔化暗陰影與亮色高光的邊緣。調大可呈現更柔和的質感，調小則使邊緣更銳利，但請注意，過大的模糊區域在可滾動的表面上會耗費較多繪製時間。
- 調整對比百分比。對比是指每個衍生色道自基準色朝黑色（暗陰影）與白色（亮色高光）移動的比例。一旦表面看起來不再細緻微妙，就應停止繼續調高。
- 設定圓角半徑。圓角應與設計系統中其他元件一致，使此柔和表面能與整體家族融為一體。
- 檢視凸起的預覽結果。預覽所呈現的背景、border-radius 與 box-shadow 值，會與可複製宣告中的內容完全相同。如果預覽看起來正確，那麼程式碼也正確。
- 複製 CSS 後，其餘細節自行補上。將宣告貼入實際元件中，確認父元件的背景相符後，再加入語意化狀態（hover、pressed、focus、disabled）。產生器只會輸出凸起狀態。
色道運算示範
以 #c8d0e0 作為基準色、對比為 15% 為例，產生器會將每個 RGB 色道朝 0 混合 15% 以產生暗色陰影，並朝 255 混合 15% 以產生亮色高光。
- 暗紅：round(200 − 200 × 0.15) = round(170) = 170 → AA
- 暗綠：round(208 − 208 × 0.15) = round(176.8) = 177 → B1
- 暗藍：round(224 − 224 × 0.15) = round(190.4) = 190 → BE
- 亮紅：round(200 + (255 − 200) × 0.15) = round(208.25) = 208 → D0
- 亮綠：round(208 + 47 × 0.15) = round(215.05) = 215 → D7
- 亮藍：round(224 + 31 × 0.15) = round(228.65) = 229 → E5
因此，這組配對陰影在右下偏移處約為 #AAB1BE，在左上偏移處約為 #D0D7E5。兩者皆已四捨五入為有效的八位元十六進位值；相同的輸入必定產生相同的十六進位字串。
輸入、輸出與受限的數值
| 輸入 | 接受的格式 | 產生器會如何處理 |
|---|---|---|
| 基準色 | 恰好六位十六進位數字 | 將其用作元件背景，並作為陰影混合的基準 |
| 陰影距離 | 有限的非負數值 | 將相同的值同時套用於水平與垂直偏移，暗色陰影為正值，高光為負值 |
| 模糊半徑 | 有限的非負數值 | 同時柔化兩個陰影的邊緣 |
| 對比 | 受限的百分比 | 將每個 RGB 色道以相同的百分比分別朝 0（暗）與 255（亮）混合；影響的是色彩，而非透明度 |
| 圓角半徑 | 有限的非負數值 | 為預覽與複製的宣告寫入 border-radius |
| 輸出 | 說明 |
|---|---|
| background | 原樣複製基準色 |
| border-radius | 原樣複製您所設定的圓角半徑 |
| box-shadow list | 兩個值：暗色陰影位於 +distance, +distance，亮色高光位於 −distance, −distance，兩者使用相同的模糊 |
產生器會將空白的數值輸入視為錯誤，而不是悄悄寫入零；它會拒絕非有限數值、拒絕不完整的色彩，並將極端值限制在安全範圍內。色道計算會四捨五入為有效的八位元十六進位值，因此產生的色彩必定能透過 CSS 再次解析。
無障礙性與仍需自行設計的狀態限制
Neumorphism 刻意設計為視覺上安靜，但這種安靜也是它最大的無障礙風險。產生器只提供柔和表面，其餘部分則必須由元件本身來承擔。
- 對齊父元件表面。柔和的錯視效果取決於元件與其背景共用同一基準色。若父元件使用不同的十六進位色，則該元件看起來就像一個無關聯的灰色方塊。
- 加入不依賴陰影的 focus 指示器。鍵盤 focus 必須在不仰賴陰影方向的情況下清楚可見。請加入在高對比與強制色彩模式中仍能顯示的外框、圓環或邊框。
- 讓 pressed 狀態看起來是被按下。產生器僅輸出凸起狀態。如需 pressed 狀態，請改用 inset shadow（負擴展），或加入一條細邊框並更換背景權杖。切勿僅依賴陰影方向。
- 以實際基準色檢驗文字與圖示。對比指的是文字與表面的對比，而非表面與其陰影的對比。請使用對比檢查工具，針對複製後的背景值進行檢驗。
- 為強制色彩模式預作規劃。當使用者啟用 Windows 高對比模式或瀏覽器的強制色彩模式時，裝飾性陰影通常會被移除。底層的語意化元件與狀態必須在缺少這些陰影時仍能清楚辨識。
- 留意繪製成本。在可滾動清單或動態表面上疊加多個大型模糊陰影，可能會降低畫面更新率，尤其在低階行動裝置上更為明顯。請將效果限制在少數穩定的元素上，並避免持續以動畫調整模糊程度。
Box Shadow 參考與決定性
複製出來的宣告採用標準的 CSS box-shadow 語法，該語法由 W3C 的 CSS Backgrounds and Borders Level 3 規範所定義，內容包含偏移對、選擇性的模糊半徑、選擇性的擴展以及色彩（W3C: box-shadow；MDN: box-shadow）。產生器嚴格遵循此格式：兩個陰影，每個皆包含偏移與模糊，不含擴展，凸起狀態不使用 inset 標記。
決定性在這裡相當重要。相同的基準色、距離、模糊、對比與圓角，必然產生相同的宣告，因此可放心用於設計權杖。若想重新定義品牌表面，僅需變更基準色與對比百分比，其餘衍生結果會自動跟進。若想微調浮起程度，請同時調整距離與模糊，而非重新調整每個屬性。
產生器也刻意省略了不屬於單一陰影規則的元素：transition、hover 移動、padding、字型與排版。這些應交由宿主元件系統負責。若元件需改變浮起程度，建議採用簡短的 transform 或以權杖化的陰影過渡處理，並遵守 prefers-reduced-motion。裝飾性的深度感不應造成 layout shift，也不應隱藏載入中或錯誤狀態。
最後，請將產生器視為草案工具，而非驗證工具。它能驗證符合 CSS 規範的數值範圍，並產生具決定性的色彩，但無法為實際產品中的對比比率、視覺層級、瀏覽器渲染差異或執行階段效能背書。請將該規則貼入測試元件，對齊父元件表面，加入語意化 HTML 與 focus 行為，分別在淺色與深色主題下以放大狀態檢查，驗證強制色彩模式，剖析行動裝置效能，並調整設計權杖，而非在程式碼各處散落零散的宣告。