Presets
Distance12px
Blur24px
Intensity15%
Radius24px
Generated CSS
border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;Category:css
Mode:Offline
Version:1.0.0
Access:Free
什麼是 CSS 神經晶體生成器？
CSS Neumorphism Generator 建構軟 UI 元素 - 使用成對的明暗陰影將形狀從背景中輕輕擠出或壓入背景的風格。您設定表面顏色、陰影距離、模糊、對比度強度、角落半徑和形狀,觀看即時預覽,然後複製精確的 CSS。
Neumorphism 的工作原理是將兩個盒子陰影放在與頁面共享背景的元素上：左上角的較淺陰影和右下角的較暗陰影。 讓兩種陰影顏色和偏移看起來非常柔軟是手工挑剔的。 此工具會自動從您的表面顏色中獲得淺色和深色陰影，因此效果始終看起來平衡。
一切都在您的瀏覽器中運行。 選擇預設，調整滑桿，在平坦、凹、凸形和壓制形狀之間切換，然後複製 CSS。 沒有帳戶，沒有上傳，一旦頁面載入，它就會繼續離線工作。
新態性值得用清晰的眼光來理解它的主要弱點,即可訪問性。該風格的工作原理是在與背景顏色幾乎相同的表面上放置淺色陰影和深色陰影,因此控制項的邊緣由百分之幾的亮度差異定義。對於某些觀眾來說,這讀起來很優雅,對於對比度敏感度較低的任何人來說,在昏暗的螢幕上或在戶外,這都是看不見的。它不符合 WCAG 1.4。11,該標準要求在互動組件的邊界上採用 3:1 的比例。通常的折衷方案是保留裝飾表面的風格,並為真正的互動元素提供真正的邊框或清晰的焦點狀態。陰影顏色源自此處的表面顏色,因此深色表面會產生正確倒置的一對而不是灰色。
如何使用 CSS 神經晶體生成器？
1
設定表面顏色
選擇元素的顏色,該顏色應與其後面的頁面背景相符 - 新態性依賴於元素和頁面共享相同的基色。
2
調影
調整距離、模糊和強度，以控制元素從頁面上移開的距離以及光/暗對比的強度。
3
選擇一個形狀
在平坦、凹、凸和壓之間切換。 按壓使用嵌入陰影看起來下沉，而凹形和凸面則增加了微妙的漸層。
4
複製 CSS
複製產生的區塊 - 邊框半徑、背景和配對的框陰影 - 並將其貼到您的卡片、按鈕或面板上。
主要特點
自動陰影顏色
淺色和深色陰影陰影來自您的表面顏色，因此 Soft-UI 效果始終看起來平衡，無需手動調整
四形
平坦、凹、凸和壓蓋的凸起和凹陷的外觀，使用嵌入陰影和凹入/凸的壓榨增加了微妙的漸變
完全控制
陰影距離、模糊、對比強度和角落半徑的滑桿讓你將效果從幾乎沒有到戲劇性
現場預覽
預覽位於匹配的背景上，因此柔和的陰影讀取正確，在您編輯時立即更新
Frequently Asked Questions
新態性或軟 UI 是一種使用兩種微妙陰影(相對角上的淺色陰影和深色陰影)從背景中輕柔地擠出元素的風格。該元素與頁面共享其背景顏色,這會產生凸起或壓製表面的錯覺。
Related Tools
CGG
css
CSS Glassmorphism Generator
Create frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius - then copy production-ready CSS.
CTS
css
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
ABP
pdf
Add Blank Page to PDF
Insert a blank page at any position in your PDF document. Choose page size (A4, Letter, or match existing pages).
UAP
web
User Agent Parser
Paste a User-Agent string and read the browser, rendering engine, operating system, device type and CPU it describes, all in your browser.
Comments
0 comments
No comments yet. Be the first to share your thoughts!
neumorphism generatorsoft ui generatorneumorphic cssneumorphism csssoft ui cssneumorphic designcss soft shadowneumorphism button