CSS盒陰影產生器

CSS盒陰影產生器

css盒陰影產生器讓您能夠視覺化設計 box-shadow 效果，並立即複製可用於生產環境的 CSS。您可以堆疊多個陰影圖層、從受 Material Design、Tailwind CSS 和 Neumorphism 啟發的精選預設集中選擇，或直接在預覽畫面上拖拽以定位陰影。所有操作均在您的瀏覽器中運行 — 您的程式碼絕不會離開此頁面。

如何使用 css盒陰影產生器

1. 調整陰影控制項 — 使用滑桿設置水平偏移 (X)、垂直偏移 (Y)、模糊半徑和擴散半徑。您也可以直接在預覽區域拖拽，直觀地重新定位陰影。
2. 選擇顏色和透明度 — 使用選色器挑選陰影顏色，並使用透明度滑桿微調透明度。預覽會即時更新。
3. 添加多層或預設集 — 點擊 + 添加陰影圖層 來堆疊陰影以獲得真實的深度感。或者選擇一個精選預設集（如 Material、Tailwind、Neumorphism 等）作為設計起點。
4. 複製 CSS — 點擊 複製 獲取產生的 box-shadow 程式碼，並將其直接貼上到您的樣式表中。

了解 box-shadow 語法

專業盒陰影設計技巧

• 多層陰影疊加 — 現實世界的物體會投射複雜的陰影。使用 2-3 層陰影（一層柔和的環境陰影 + 一層較銳利的主光源陰影）比單層陰影產生的效果要真實得多。
• 使用低透明度 — 透明度在 8-20% 之間的陰影看起來最自然。避免使用高透明度的純黑陰影，因為這會顯得生硬且過時。
• 統一光照方向 — 在整個 UI 中保持陰影偏移的一致性，以模擬單一光源。不一致的陰影會破壞視覺錯覺。
• 彩色陰影 — 嘗試使用元素背景色的較深色調，而不是純黑色，以獲得更協調、更現代的外觀。
• 負值擴散 — 負的擴散值會使陰影縮小到比元素本身還小，從而建立微妙的接觸陰影，使元素在沒有可見邊緣的情況下顯得紮實。

常見陰影風格說明

• Material Design Elevation (海拔) — 使用兩層陰影：柔和的環境陰影和銳利的主陰影。不同的海拔等級 (1-5) 會漸進地增加偏移和模糊。
• Tailwind CSS 工具類 — Tailwind 提供 shadow、shadow-md、shadow-lg、shadow-xl 和 shadow-2xl 等類別，每一類都使用了針對常見卡片和模態框場景優化的雙層陰影。
• Neumorphism (新擬物化) — 使用兩個相反的陰影（一亮一暗）建立柔軟、擠壓塑料的效果。在光線充足的灰色背景上效果最好，因為兩者陰影都清晰可見。
• Glassmorphism (玻璃擬態) — 將微妙的陰影與背景模糊 (backdrop-filter) 和半透明背景結合。陰影在毛玻璃效果下方增加了深度。

常見問題解答

什麼是 CSS box-shadow 屬性？

CSS box-shadow 屬性用於在元素框架周圍添加陰影效果。它接受水平偏移、垂直偏移、模糊半徑、擴散半徑和顏色值。多個陰影可以用逗號分隔，以建立層次化的深度效果。

如何在 CSS 中建立多個盒陰影？

透過用逗號分隔每個陰影定義來建立多個盒陰影。例如：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1)。每個陰影都會渲染在前一個陰影之上，第一個定義的陰影顯示在最頂層。

box-shadow 和 drop-shadow 有什麼區別？

box-shadow 將陰影應用於元素的矩形框，而 filter: drop-shadow() 則遵循實際形狀（包括透明區域）。box-shadow 支援擴散半徑和內陰影模式，而 drop-shadow 則不支援。對於標準矩形元素，box-shadow 更常用且效能更好。

什麼是內陰影 (inset box shadow)？

內陰影出現在元素內部而不是外部。它是透過在陰影值之前添加 inset 關鍵字來建立的。內陰影常用於按鈕按下效果、輸入框樣式以及建立凹陷或雕刻外觀。

微妙卡片效果的建議 box-shadow 值是多少？

一種受歡迎的微妙卡片陰影使用兩個圖層：0 1px 3px rgba(0,0,0,0.12) 用於近距離陰影，0 1px 2px rgba(0,0,0,0.24) 用於定義。Tailwind CSS 在其預設陰影工具中使用 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)。