重點整理
Neumorphism（新擬態、Soft UI）是用高光與陰影做出立體感的介面風格。Neumorphism.io 讓你選擇光源方向，拖拉調整顏色、尺寸、圓角、陰影距離、強度與模糊，即時預覽後按 Copy 複製 CSS，不必自己寫陰影程式碼。
Neumorphism.io 是一個能夠幫助使用者快速建立 Soft UI 的免費線上工具，版面簡潔易懂以拖拉方式即可完成編輯，並且能立即生成 CSS 程式碼，如果你是一位設計師或是前端工程師的話，Neumorphism.io 或許會是你工作上的好幫手！
Neumorphism 是什麼
首先我們先來了解 Neumorphism 是什麼，Neumorphism 是由「New Skeuomorphism」組合而成的新名詞，，中文稱作新擬態、同化，也就是新型態的擬物化風格設計的意思，也有設計師稱其為 Soft UI（軟UI）。
Neumorphism 風格源頭為烏克蘭的設計師 Alexander Plyuto，於 2019年底所發表的作品「Skeuomorph Mobile Banking」，也是 2020年最熱門的新風格，它透過燈光的原理，替圖形加上高光和陰影，賦予元件真實和立體感。
Neumorphism.io 是什麼
因此 Neumorphism.io 也就是一個基於 Neumorphism 的設計概念所發展出來的免費線上工具，透過 Neumorphism 使用者可以直接在線上以拖拉的方式設計且得到 CSS 程式碼，在 Neumorphism 上使用者可選擇燈光位置來源，以拖拉來調整顏色、尺寸、半徑、光影的距離、光影的強度、光影的模糊、形狀等，並且可一件複製 CSS 程式碼。
Neumorphism.io 使用教學
第一步：開啟 Neumorphism.io 網站後，即可看到完整可編輯的版面。
第二步：編輯燈光位置、顏色、尺寸、半徑、光影的距離、光影的強度、光影的模糊、形狀等。
第三步：按下「Copy」即可複製 CSS 程式碼。
常見問題
Neumorphism 是什麼？
Neumorphism（新擬態）是一種介面設計風格，元件和背景用同一種顏色，靠一側亮、一側暗的陰影做出像是從表面浮起或壓下的立體感，也被稱為 Soft UI。它在 2020 年前後流行，常見於按鈕、卡片與儀表板設計。
Neumorphism.io 怎麼產生 CSS？
打開 Neumorphism.io 後，先選光源方向，再拖拉調整顏色、尺寸、圓角、陰影距離、強度與模糊，右側會即時預覽效果，滿意後按 Copy 複製 CSS，貼到網站的樣式表中即可，產生的主要是 background 與 box-shadow 設定。
Neumorphism 風格適合用在網站上嗎？
適合局部使用，不建議整站套用。新擬態的元件和背景同色，邊界只靠陰影區分，對比度低，視力較弱的使用者或在陽光下看手機時容易看不清，按鈕也不容易看出可以點。用在裝飾性卡片，重要按鈕仍維持清楚的顏色對比較好。
結語
若想要設計 Neumorphism 卻不會寫程式碼或是對設計沒有概念想要學習 Neumorphism 的使用者來說 Neumorphism.io 會是一個分長好的幫手，不僅版面簡潔易懂，以拖拉方式即可完成編輯外，還可以一件複製 CSS 程式碼。