Neumorphism 產生器的 API 替代方案是一種瀏覽器內工具，它能從單一基礎色彩產生配對的 soft-UI 陰影與相符的表面背景，且不會將任何數值傳送到遠端端點。這個產生器不需要整合託管服務、不需要付費使用層級，也不需要管理 API 金鑰，而是在您正在瀏覽的網頁中完成所有色彩混合與驗證。您提供一個六位數的基礎色、陰影距離、模糊半徑、對比百分比，以及圓角半徑；工具會將每個色通道向黑色混合以產生較深的陰影，並將同樣的色通道向白色混合以產生較亮的高光，將兩者以相等的正負位移放置，然後回傳一段可直接複製的宣告，包含背景值與 box-shadow 列表。預覽使用完全相同的數值，因此您複製的內容與您看到的畫面完全一致。每個數值都在您的瀏覽器內處理，沒有任何檔案或色彩字串會離開這個分頁，不需要帳號，也不需要在專案中安裝任何東西。最終的結果是一個可立即貼上使用的 soft-UI 表面，您可以在比對好父層背景並加入 focus、hover 與 pressed 狀態後，將其貼入真實的元件中。
本地產生器如何取代 API 端點
託管的 neumorphism 端點看起來很方便，但它們以控制權換取了一次額外的網路往返。本地產生器去除了那次往返，讓您以 DOM 的速度進行迭代。
- 沒有金鑰或配額。 您不需要向第三方進行驗證，因此洩漏的權證、計費變更或服務下線都不會打斷您的設計流程。
- 沒有網路延遲。 色彩混合與陰影組裝會在同一個按鍵的 paint frame 內完成，這在您正在拖動對比滑桿尋找最柔和且可閱讀的數值時特別重要。
- 不需要上傳設計權杖。 您的基礎色與品牌色盤都留在分頁內。如果想要確認，可以閱讀CSS Neumorphism 產生器是否會將任何資料傳送到伺服器；該文的答案在此同樣適用。
- 不需要維護 SDK。 整合方式就是一次貼上到您的樣式表。當產生器的合約變更時，您的程式碼不會壞掉，因為您從未依賴任何函式呼叫。
- 沒有版本漂移。 由您決定何時重新產生。API 可能一夜之間推出破壞性更新；而您隨時可造訪的瀏覽器工具則不會。
位於 /dev/css-neumorphism-generator/ 的 CSS Neumorphism 產生器正是實作了這個合約：有界數值輸入、一個六位數色彩字串、確定性的色通道運算，以及一段可複製的宣告。本文的其餘部分將說明如何操作它，以及其輸出所保證的內容。
使用瀏覽器產生器建立 Neumorphic 表面
- 挑選元件將與其父層共用的基礎色。 Soft UI 只有在元素與其後方的表面為同一顏色時才能正確呈現。選擇一個六位數的十六進位色，例如 #e0e6f0；它會同時成為該元素的背景以及陰影混合的參考基準。
- 設定陰影距離。 這個單一數值會控制兩個陰影的水平與垂直位移。較小的距離讓表面貼近其背景；較大的距離則讓它在不產生動畫的情況下明顯浮起。
- 設定模糊半徑。 模糊會柔化深色陰影與淺色高光的邊緣。想要更柔和就調高，想要更銳利就調低，但請記得大面積的模糊區域在捲動表面上會耗費繪製時間。
- 調整對比百分比。 對比是指每個衍生色通道自基礎色分別向黑色（深色陰影）與白色（淺色高光）移動的百分比。一旦表面看起來不再細緻，就停止增加。
- 設定圓角半徑。 讓圓角與設計系統的其他部分一致，使這個柔和表面與您其他元件感覺屬於同一家族。
- 檢視凸起的預覽。 預覽會渲染與複製宣告中相同的 background、border-radius 與 box-shadow 值。如果預覽看起來正確，程式碼就是正確的。
- 複製 CSS，其餘由您自行補上。 將宣告貼入真實的元件中，確認父層背景一致，然後再加上語意狀態（hover、pressed、focus、disabled）。產生器只會輸出凸起狀態。
色通道運算範例
以 #c8d0e0 為基礎色、對比 15% 為例，產生器會將每個 RGB 色通道以 15% 的比例向 0 混合以產生深色陰影，並將每個色通道以 15% 的比例向 255 混合以產生淺色高光。
- 深紅：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。兩者都會四捨五入為合法的 eight-bit 十六進位值；相同的輸入永遠會產生相同的十六進位字串。
輸入、輸出與有界數值
| 輸入 | 接受格式 | 產生器對其的處理 |
|---|---|---|
| 基礎色 | 恰好六位十六進位數字 | 將其作為元素的背景以及陰影混合的參考基準 |
| 陰影距離 | 有界的非負有限數 | 將同一數值同時套用於水平與垂直位移，深色陰影為正、淺色高光為負 |
| 模糊半徑 | 有界的非負有限數 | 柔化兩個陰影的邊緣 |
| 對比 | 有界百分比 | 以相同百分比將每個 RGB 色通道分別向 0（深）與 255（淺）混合；影響的是色彩而非不透明度 |
| 圓角半徑 | 有界的非負有限數 | 為預覽與複製的宣告寫入 border-radius |
| 輸出 | 說明 |
|---|---|
| background | 基礎色，原不變原樣複製 |
| border-radius | 您設定的圓角半徑，原不變原樣複製 |
| box-shadow 列表 | 兩個值：深色陰影位於 +distance、+distance，淺色高光位於 −distance、−distance，兩者使用相同的模糊值 |
產生器會將空白的數值輸入視為錯誤，而不是靜默地寫入零；拒絕非有限數；拒絕不完整的色彩；並將極端值箝制在安全範圍內。色通道運算會四捨五入為合法的 eight-bit 十六進位值，因此產生的色彩一定能被 CSS 正確解析回來。
您仍須自行設計的可及性與狀態限制
Neumorphism 在設計上視覺上是安靜的，但這種安靜也是它最大的可及性風險。產生器只提供柔和的表面，其餘的重擔必須由周圍的元件承擔。
- 與父層表面相符。 柔和的錯視效果取決於元素與其背景共用同一個基礎色。如果父層是不同的十六進位色，該元素看起來就只是一個不相干的灰色方塊。
- 加入不是陰影的 focus 指示器。 鍵盤焦點必須在不依賴陰影方向的情況下可見。請加入明確的 outline、ring 或 border，使其在高對比與強制色彩模式下仍能顯示。
- 讓 pressed 狀態看起來確實被按下。 產生器只會輸出凸起狀態。若要表示 pressed 狀態，請改用 inset 陰影（負的 spread）或加上細微的 border 並更換背景權杖。不要只靠陰影方向來表達。
- 針對實際的基礎色檢測文字與圖示的對比。 對比是相對於文字與表面之間的關係，而非表面與其陰影之間的關係。請使用對比檢測工具，以複製出來的背景值作為基準進行檢測。
- 為強制色彩模式做準備。 當使用者啟用 Windows High Contrast 或瀏覽器的 forced-colors 模式時，裝飾性的陰影通常會被捨棄。底層的語意元素與狀態必須在沒有陰影的情況下仍可被理解。
- 注意繪製成本。 在捲動清單或動畫表面中使用多個大型模糊陰影，可能會降低畫面更新率，在較低階的行動裝置上尤其明顯。請將此效果限制在少數穩定的元素上，並避免持續地動畫模糊值。
Box Shadow 參考與確定性
複製出來的宣告採用標準的 CSS box-shadow 語法，W3C 的 CSS Backgrounds and Borders Level 3 規範將其定義為一對位移、一個可選的模糊半徑、一個可選的 spread，以及顏色（W3C: box-shadow；MDN: box-shadow）。產生器嚴格遵循這個形式：兩個陰影，各自帶有位移與模糊值，沒有 spread，凸起狀態不使用 inset 標記。
確定性在這裡非常重要。相同的基礎色、相同的距離、相同的模糊、相同的對比、相同的半徑，永遠會產生相同的宣告，因此設計權杖可以放心地引用它。如果想要重新定義表面品牌，只要更改基礎色與對比百分比，其餘的衍生結果就會跟著改變。如果想要調整高度，請同時調整距離與模糊，而不是重新調整每個屬性。
產生器也刻意省略了不屬於單一 shadow 規則的東西：transition、hover 移動、推擠、字型與排版、佈局。這些屬於宿主元件系統的範疇。如果您的元件需要變更高度，建議使用簡短的 transform 或以權杖化的 shadow transition，並尊重 prefers-reduced-motion。裝飾性的深度不應造成版面位移，也絕不能用來掩蓋載入或錯誤狀態。
最後，請將產生器視為草稿工具，而非驗證工具。它會驗證 CSS 導向的範圍並產生確定性的色彩，但它無法認證對比比率、視覺層級、瀏覽器渲染差異，或在真實產品中的執行階段效能。請將該規則貼入測試元件、對齊父層表面、加入語意 HTML 與 focus 行為、在縮放狀態下檢查淺色與深色主題、確認強制色彩的表現、檢測行動裝置的效能，並以調整設計權杖取代在程式碼庫各處貼上零散的單次宣告。
如果您正在權衡各種選項，適用於單層的 Text Shadow 產生器 API 替代方案對此有詳細說明。