新擬態生成器

🧊 Neumorphism CSS Generator

Flat
Pressed
Punch
⬜ 方形
⭕ 圓形
🔘 按鈕
📐 計算公式 / 原理
新擬態 = 同色系淺色雙陰影(左上高光 + 右下暗影)營造凸起或凹陷感;按距離、強度、模糊與底色拼裝 box-shadow 與圓角並預覽,用於柔和立體 UI。

Tune distance, intensity, blur and base colour to generate soft, extruded neumorphic shadow and radius CSS for UI elements.

📚 深度解析:新擬態生成器

💡 常見使用場景

  • 做柔和卡片、按鈕。
  • 現代 dashboard 元件。
  • 演示新擬態風格。
生成淺色新擬態卡
<p><strong>輸入:</strong>底 #E0E5EC、光白影深灰。</p><p><strong>處理:</strong>雙向 box-shadow 模擬凹凸。</p><p><strong>輸出:</strong>CSS 與預覽,需淺底襯托。</p>

❓ 常見問題(FAQ)

為什麼深底看不出?
新擬態依賴與背景同色的高低光,深底對比弱;多用淺灰底效果最明顯。
光源方向怎麼定?
由雙向陰影的明暗決定,統一一個方向(如左上)更自然,避免雙向矛盾。
會儲存或上傳我的內容嗎?
結果以瀏覽器即時計算為準,純前端本地處理、資料不上傳;生成的樣式與程式碼僅作快速產出參考,正式專案請以設計系統、規範與瀏覽器實測為準。
⚠️ 使用說明與注意事項
📖關於「新擬態生成器」 ▼

📝工具簡介

新擬態生成器。設計創意工具,視覺化操作,一鍵生成 CSS 程式碼。

✨功能特點

🎯使用場景