CSS 陰影產生器

產生器

box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);

什麼是 CSS box-shadow？

CSS box-shadow 屬性可以為元素添加一個或多個陰影效果。它廣泛應用於網頁設計中，用以增強視覺層次感和深度感。陰影可以設置為外陰影或內陰影，支援自定義顏色、模糊半徑和擴展範圍。

本產生器提供視覺化界面，讓您可以即時調整陰影參數並預覽效果，最後生成標準的 CSS 代碼供您直接使用。

如何使用 CSS 陰影產生器

1. 調整單個陰影：使用滑塊調整水平偏移、垂直偏移、模糊半徑、擴展半徑和透明度。
2. 選擇顏色：點擊顏色選擇器，選擇您想要的陰影顏色。
3. 切換內陰影：勾選「內陰影」復選框以將陰影改為內陰影效果。
4. 新增多個陰影：點擊「新增陰影」按鈕添加多達 4 個陰影圖層，創建複雜的陰影效果。
5. 使用預設：選擇預設陰影樣式（平面、浮起、漂浮等）快速應用常見效果。
6. 複製代碼：生成的 CSS 代碼隨時可複製，直接粘貼到您的樣式表中。

應用場景

• 卡片設計：為卡片元素添加陰影，提升視覺深度和點擊感。
• 按鈕效果：按鈕懸停時添加動態陰影，提高交互反饋。
• 導航欄：為導航欄添加細微陰影，與背景分離。
• 模態對話框：使用內陰影或強陰影突出模態窗口。
• 特殊效果：創建霓虹光暈、發光邊框等創意設計效果。
• 響應式設計：在不同屏幕尺寸上保持一致的視覺效果。

常見問題

box-shadow 的各個參數分別代表什麼？

box-shadow 的語法為：offset-x offset-y blur-radius spread-radius color。其中：

• offset-x：陰影的水平偏移（正值向右，負值向左）
• offset-y：陰影的垂直偏移（正值向下，負值向上）
• blur-radius：陰影的模糊半徑（值越大陰影越模糊）
• spread-radius：陰影的擴展範圍（可選，正值擴大陰影，負值縮小）
• color：陰影的顏色（支持 rgba 用於控制透明度）

如何添加多個陰影效果？

使用本產生器的「新增陰影」功能可以疊加多個陰影圖層。多個陰影之間用逗號分隔，後面的陰影會疊加在前面的陰影上方。這樣可以創建複雜的多層陰影效果。

什麼是內陰影（inset）？

內陰影是一種特殊的陰影效果，它出現在元素的內部邊界而非外部。勾選「內陰影」復選框可以在陰影前添加 inset 關鍵字。內陰影常用於創建凹陷或按下的視覺效果。

我可以在所有瀏覽器中使用 box-shadow 嗎？

是的，box-shadow 在所有現代瀏覽器中都得到良好支持，包括 Chrome、Firefox、Safari 和 Edge。對於舊版 IE，可能需要使用廠商前綴（如 -moz-box-shadow 和 -webkit-box-shadow），但大多數現代項目無需擔心。

如何優化陰影效果以提高性能？

避免過度複雜的陰影和高模糊值。對於動畫元素，建議使用簡單的陰影效果。如果陰影不變，避免在 JavaScript 中頻繁更新。考慮使用 will-change: box-shadow 提示瀏覽器進行優化。

預設陰影對應什麼樣的設計？

本產生器提供 5 種預設：

• 平面：極簡設計，陰影極淺
• 浮起：卡片設計常用，給人浮起感
• 漂浮：強烈的浮起效果，多用於懸停狀態
• 內陰影：創建凹陷感，適合按鈕、輸入框
• 霓虹：彩色發光效果，用於創意設計