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:整體的顏色

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


Neumorphism CSS Generator 評價推薦優點
- 線上客製化新擬態風格 UI 元素
- 免費產生 CSS 程式碼
- 可設定凸起與凹陷樣式
你可能有興趣
- CSS Background Patterns – 21+ 免費線上背景 CSS 樣式,可即時預覽與設定顏色間距及透明度並一鍵複製
- Koofr – 免費 10 GB 雲端儲存空間,可連結同步 Google Drive、Dropbox 與OneDrive 實現聚合管理功能
- Mirrored.to – 整合多款免費雲端空間上傳服務,只需上傳一次即可批次將檔案上傳至多個鏡像免空
- ProductShot – 免費上圖片局部放大產生器,幫助你凸顯圖片中的重點區塊並支援複製上傳下載功能
- Whyp.it – 免費音樂雲端上傳空間,免註冊即可上傳音樂並即時線上高音質播放
- Upload.cc – 老牌免費圖片上傳雲端空間,上限 5 MB 無需註冊永不刪檔支援批量圖片上傳功能
- Blobs – 線上免費產生 Blobs 圖形,可調整大小形狀、漸變顏色並產生 SVG 格式與支援 Flutter 程式匯入
- BackgroundCut – 最佳免費線上去背工具,採用 AI 技術處理刪除複雜背景並產生高解析度去背後圖片
- CSS Gradient – 線上產生線性漸變背景,提供 5 種漸變模式與可客製化顏色與色段區間並產生 CSS 程式碼
- Cool Backgrounds – 免費背景線上產生器,快速建立三角抽象、多線條、漸變與渲染的豐富背景
- Trianglify.io – 線上多邊形圖片背景產生器,可客製化圖片的大小顏色與多邊形樣式並免費下載
- Ray.so – 免費程式碼轉換圖片線上工具,將代碼製作成精美的色彩圖片可自由客製化圖片外觀
如果你喜歡這篇文章,請幫我們將這篇文章分享出去。你也可以在 Facebook 與 Instagram 上按讚追蹤我們,也歡迎加入 Facebook 粉絲團和我們一同交流!
發佈留言