CSS 盒陰影生成器（box-shadow）
通過滑塊調整偏移、模糊、擴散、顏色和不透明度，即時預覽並生成 CSS box-shadow 程式碼，一鍵複製生成的程式碼。
box-shadow 是什麼
box-shadow 是讓元素投下陰影的 CSS 屬性。取值依序為「水平偏移、垂直偏移、模糊半徑、擴散半徑、顏色」，但四個數字排成一列，而模糊與擴散的差別僅憑文字又難以體會，因此它也是手寫起來相當費神的屬性。本工具讓您拖動滑桿調整各項數值，並即時預覽結果。
決定陰影氣質的，與其說是數值大小，不如說是組合方式。看起來自然的陰影多半是偏移小、模糊大、不透明度低；反之把偏移拉大、不透明度提高，就會顯得像剪下來貼上去那樣生硬。加上 inset 則陰影落在元素內部，形成凹陷的效果。產生的程式碼可一鍵複製，所有處理都在瀏覽器中完成。
製作陰影的步驟
- 確定偏移量 這一步決定光源的方向。多數情況下把 X 設為 0、Y 取稍小的正值會比較自然。
- 調整模糊半徑 這是陰影邊緣的柔和程度。數值越大，陰影鋪得越廣越淡。
- 調整擴散半徑 它讓陰影本身變胖或變瘦。與模糊不同，它不改變邊緣的硬度。
- 選擇顏色與不透明度 半透明的黑色最為穩妥，但取一個接近背景的深色再淡淡鋪上，會更融洽。
-
複製程式碼
把產生的
box-shadow取值直接貼到樣式表中即可。
用好本工具的小技巧
- 除了拖動滑塊，也可以直接在輸入框中輸入精確的數值，方便進行細緻調整。
- 開啟「inset」後，陰影會繪製在元素內部，呈現出凹陷的立體效果，而不是浮起的效果。
- 增大spread（擴散半徑）會讓整個陰影輪廓變大，增大blur（模糊半徑）則會讓邊緣變得柔和模糊，兩者搭配可以調出不同的質感。
- 降低不透明度可以讓陰影顯得更輕盈自然，在多個元素疊加在彩色背景上時尤其有用。
- 生成的CSS程式碼可以直接貼上到樣式表中使用，與按鈕或卡片的懸停效果搭配使用效果尤佳。
這些情境會用到
為卡片與按鈕營造立體感
哪怕只有一點點陰影，也更容易讓人看出這是可點擊的元素。
讓彈窗與下拉浮起來
可以用陰影的強弱表現它與背後內容之間的層疊關係。
還原設計稿中的陰影
把設計工具裡的陰影設定翻譯成 CSS 時，可以邊比對邊調整數值。
製作凹陷的效果
使用 inset 便能嘗試讓輸入框看起來像是嵌入頁面之中。
box-shadow 的術語
- 偏移量
- 陰影錯開的距離。第一個是水平方向（X），第二個是垂直方向（Y），正值向右、向下移動。
- 模糊半徑（blur）
- 讓陰影邊緣變柔和的量。設為 0 時會得到輪廓清晰的陰影。
- 擴散半徑（spread）
- 放大陰影的量。取負值則陰影會縮小。
- inset
- 把陰影投到元素內部的關鍵字，可形成凹陷般的效果。
- 不透明度
- 陰影的濃淡，作為
rgba()的 alpha 值指定。過濃的陰影會顯得沉重。 - 多重陰影
- 可用逗號疊加多層陰影。把近處的濃陰影與遠處的淡陰影疊在一起會更自然。
常見問題
閒話 ― box-shadow如何改變了網頁設計的表現力
在CSS3標準化box-shadow之前，網頁上要實現投影效果，通常需要在影像編輯軟體中預先繪製好帶陰影的背景圖片，或者通過疊加多個帶漸變背景的div元素來模擬陰影效果。哪怕只是稍微調整陰影的形狀或柔和度，也需要重新制作圖片，這使得設計的反覆調整既緩慢又費成本。
大約從2009年起，瀏覽器開始將box-shadow作為CSS3的一部分實現，此後只需一行CSS宣告即可生成陰影。不再需要額外的圖片資源，頁面載入變得更輕量，而且即使佈局隨螢幕尺寸響應式變化，陰影的形狀也能保持正確。
2014年穀歌釋出Material Design時，在box-shadow的基礎上構建了「elevation（高度）」的概念：每個元素在Z軸上被賦予不同的高度，位置越高的元素投下的陰影越大越深。這讓原本扁平的介面擁有了層次感和縱深感，這一理念至今仍影響著許多設計系統。