CSS 陰影產生器
免費線上 CSS 陰影產生器。即時預覽製作複雜的多層陰影。可自訂位移、模糊、擴散、顏色與內陰影屬性。
CSS 陰影產生器
免費線上 CSS 陰影產生器。即時預覽製作複雜的多層陰影。可自訂位移、模糊、擴散、顏色與內陰影屬性。
關於 CSS 陰影
建立逗號分隔的多層陰影
每個圖層都會變成一段 box-shadow 值，包含可選的 inset、水平位移、垂直位移、模糊半徑、擴散半徑與顏色。多個圖層會合併在同一個宣告中，符合標準 CSS box-shadow 語法。
區塊顏色只是預覽設定
背景與區塊顏色用來檢查陰影在淺色或有色表面上的效果。它們不會被放進複製片段，輸出只包含產生的 box-shadow 宣告。
模糊柔化邊緣，擴散改變大小
固定位置、顏色與擴散，將模糊從 0 調到 20 px，可看到清晰邊緣變成柔和過渡。再把模糊歸零，將擴散從 0 調到 10 px：陰影會向四周變大，邊緣仍然清晰。CSS 先套用擴散再模糊，因此要調整陰影範圍時改擴散，要柔化邊緣時改模糊。
用負擴散收窄外陰影
關閉內陰影，將水平位置設為 0、垂直位置設為 12 px、模糊設為 16 px，再比較擴散 0 與 -8 px。負擴散會先縮小陰影再模糊；配合向下位移，更多陰影藏在區塊後方，效果便集中在下緣，但不保證其他三邊完全沒有陰影。負值過大可能讓陰影消失；內陰影開關則是把效果改到區塊內側。
同類陰影中，第一層畫在最上方
多層外陰影重疊時，逗號清單中的第一段會畫在最上方。本工具依畫面順序輸出圖層，新增圖層接在最後。可把第一層設成較小、清楚的陰影，第二層設成較寬、柔和的陰影；若第二層不明顯，試著降低第一層的不透明度或擴散。內陰影畫在區塊背景上方，外陰影畫在區塊後方，清單順序不會把外陰影變成內陰影。
常見問題
關於這個主題的常見疑問與實用解答。
可以自訂哪些屬性？
您可以自訂水平與垂直位移、模糊半徑、擴散半徑、陰影顏色，以及切換內陰影模式。
可以新增多層陰影嗎？
可以，可疊加多層陰影以營造複雜的立體效果。每層都可以有獨立的位移、模糊、擴散與顏色設定。
產生的程式碼跨瀏覽器相容嗎？
是的，標準 CSS box-shadow 屬性無需供應商前綴即可在所有現代瀏覽器中運作。
我的資料會被傳送到伺服器嗎？
不會，box-shadow CSS 生成完全在您的瀏覽器中執行。您的陰影設定透過 JavaScript 在本地處理，絕不會離開您的裝置。