CSS 陰影產生器
建立平滑的多層盒狀陰影，調整外觀並匯出 CSS。
CSS程式碼
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
0px 4px 8px 0px rgba(0, 0, 0, 0.1);
層數
圖層 1
圖層 2
全域預覽設定
背景顏色
圖層設定
偏移 X：0px
Y 偏移：1px
模糊：3px
點差：0px
不透明度：10%
顏色插畫
即用型預設
軟滴
中等海拔
高浮力
清晰的邊框
復古塊
內部深度
發光
平滑層
深層
終極 CSS 陰影生成器
使用我們的 CSS 盒子陰影產生器 掌握深度藝術。無論您是建立 Neumorphism 介面、乾淨的 SaaS 儀表板還是 Material Design 卡，分層陰影都是專業外觀的關鍵。
什麼是平滑陰影？
「平滑陰影」或 分層陰影 是透過在單一元素上堆疊多個 box-shadow 規則來建立的。單一陰影通常會產生尖銳的人造邊緣。透過使用 4、6 甚至 8 層陰影並增加模糊半徑和降低不透明度，您可以模擬真實的光線漫射（環境光遮擋）。
使用案例和關鍵字
對於開發人員
無需編寫手動程式碼即可調試並產生複雜的 CSS3 盒子陰影。非常適合 React、Vue 和 Angular 專案。
對於設計師
將 Figma 效果翻譯到網路。建立 軟用戶介面 元素、發光效果 和自訂順風陰影實用程式。