CSS 盒陰影生成器（box-shadow）
通過滑塊調整偏移、模糊、擴散、顏色和不透明度，即時預覽並生成 CSS box-shadow 程式碼，一鍵複製生成的程式碼。
使用小貼士
- 除了拖動滑塊，也可以直接在輸入框中輸入精確的數值，方便進行細緻調整。
- 開啟「inset」後，陰影會繪製在元素內部，呈現出凹陷的立體效果，而不是浮起的效果。
- 增大spread（擴散半徑）會讓整個陰影輪廓變大，增大blur（模糊半徑）則會讓邊緣變得柔和模糊，兩者搭配可以調出不同的質感。
- 降低不透明度可以讓陰影顯得更輕盈自然，在多個元素疊加在彩色背景上時尤其有用。
- 生成的CSS程式碼可以直接貼上到樣式表中使用，與按鈕或卡片的懸停效果搭配使用效果尤佳。
常見問題
blur（模糊半徑）決定陰影邊緣的柔和程度，數值越大，邊緣的漸變範圍越寬。而spread（擴散半徑）則改變陰影本身的大小：正值會讓陰影比元素本身更大，負值則會讓陰影收縮變小。將兩者結合使用，可以精細地調整陰影的質感。
inset關鍵字會讓陰影繪製在元素邊框的內側，而不是外側。普通的box-shadow會讓元素看起來像懸浮在頁面之上，而inset則會讓元素呈現出凹陷或內嵌的效果，常用於表單輸入框邊框的視覺設計。
CSS的box-shadow屬性支援以逗號分隔的多個陰影值，可以疊加出更具立體感的效果。本工具為了簡單易用，專注於生成單個陰影；如果需要多層陰影，可以在生成的CSS基礎上手動新增以逗號分隔的值。
box-shadow是一個標準的CSS屬性，包括Internet Explorer 9及更高版本在內的所有主流瀏覽器都支援。曾經需要-webkit-、-moz-等瀏覽器字首，但如今無需字首即可直接使用。
完全不透明的黑色陰影（不透明度100%）在某些背景色下會顯得生硬或不自然。降低不透明度使用半透明的黑色或灰色，可以讓陰影在任何背景色上都顯得柔和自然。
閒話 ― box-shadow如何改變了網頁設計的表現力
在CSS3標準化box-shadow之前，網頁上要實現投影效果，通常需要在影像編輯軟體中預先繪製好帶陰影的背景圖片，或者通過疊加多個帶漸變背景的div元素來模擬陰影效果。哪怕只是稍微調整陰影的形狀或柔和度，也需要重新制作圖片，這使得設計的反覆調整既緩慢又費成本。
大約從2009年起，瀏覽器開始將box-shadow作為CSS3的一部分實現，此後只需一行CSS宣告即可生成陰影。不再需要額外的圖片資源，頁面載入變得更輕量，而且即使佈局隨螢幕尺寸響應式變化，陰影的形狀也能保持正確。
2014年穀歌釋出Material Design時，在box-shadow的基礎上構建了「elevation（高度）」的概念：每個元素在Z軸上被賦予不同的高度，位置越高的元素投下的陰影越大越深。這讓原本扁平的介面擁有了層次感和縱深感，這一理念至今仍影響著許多設計系統。