Neumorphism CSS Generator – 新擬態風格圖形樣式產生器，線上客製化最新軟 UI 風格與產生 CSS 程式碼

Neumorphism CSS Generator 是一款能夠提供前端設計師快速線上建立 Soft UI 的一項免費工具，他目前能夠讓你調整圖型的大小、邊框半徑、陰影的距離、陰影凸起或凹陷、光源角度、以及整體主題的顏色。

Neumorphism 也有人稱之為 Soft UI，近似的翻譯可以理解為「新擬態」、「軟 UI」，也有的人將這個最新趨勢的前端設計風格稱為「新擬物風格」。這種風格大約起源於 2019 年底，並且在 iOS 13 的系統更新中，就可以看到大量的 Neumorphism 風格。

新擬態設計風格通常會應用於按鈕或卡片的元素，並且通常只有一個光源的照射，比較特別的點在於，按鈕的狀態會呈現突出與凹陷，兩種不同的效果，分別表示按鈕是否點選。簡單來說，新擬態設計風格是一種圖形樣式，目的是為了賦予 UI 介面更加真實的視覺感。

網站名稱：Toolbox – Neumorphism Generator
網站網址：http://santhoshsivan.com/neu.html

Neumorphism CSS Generator 簡介教學

Step 1

進入頁面後，你可以透過左側的工具進行外觀樣式的調整。目前提供的功能有：

• Size：整個區塊的大小
• Radius：圓角半徑
• Distance：陰影的距離範圍
• Light Source Direction：光源的照射角度
• Color Theme：整體的顏色

Pin

Step 2

調整完後，點選左側最下方的「Generate CSS」按鈕，他就能產生 CSS 程式碼。複製後你就可以貼至你的專案中，應用你剛剛所設計的新擬態風格的元素。

Pin