開發者 / CSS
CSS Box Shadow 產生器
以視覺化方式建立 CSS box-shadow：調整位移、模糊、擴散、顏色、不透明度、inset 和多個圖層，搭配預設樣式與即時預覽，完成後即可複製 CSS。
CSS Box Shadow 產生器: 每個圖層會成為 box-shadow 清單中的一個陰影，包含水平與垂直位移、模糊半徑、擴散，以及使用 rgb() 撰寫、在斜線後指定不透明度的顏色。圖層會按照順序繪製，第一個圖層在最上方。您可以變更預覽方框的圓角半徑、顏色和背景，以符合您的設計；陰影也會隨著圓角變化，就像套用在頁面上一樣。 全程在瀏覽器中於本機執行，檔案不會上傳至伺服器。
- 分類
- 開發者工具
- 使用次數
- 在瀏覽器中
- 費用
- 免費・免註冊
- 可用狀態
- 可立即使用
全程在瀏覽器中執行
CSS
box-shadow: 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
數值依序為向右偏移、向下偏移、模糊、擴散與顏色。多個薄的圖層比單一厚重的陰影看起來更自然；後面的圖層會繪製在前面的圖層下方。
預設
高度感
設計系統會使用陰影來呈現物件浮在頁面上方的距離：靜止的卡片使用小而緊密的陰影，選單或對話框則使用更大、更柔和的陰影。固定使用幾個層級，而不是讓每個地方都有不同陰影，能讓介面感覺更一致。
深色背景上的陰影幾乎看不見；這時，較淺的表面色彩或細邊框也能達到相同效果。按鈕與卡片可以搭配CSS漸層使用陰影。
陰影與效能
大範圍模糊比小範圍模糊需要更多繪製資源；當許多帶有陰影的元素同時捲動或動畫時，這點尤其重要。若要製作滑鼠移入時的陰影動畫，使用不透明度讓偽元素淡入第二層更強的陰影，會比每一幀都變更box-shadow更順暢。
使用方式
- 從預設樣式開始，或調整第一個圖層的位移、模糊、擴散和不透明度。
- 加入更多圖層，讓陰影更柔和、更自然；或勾選 inset，將陰影放在方框內部。
- 複製 box-shadow 宣告。
隱私與限制
所有功能都在您的瀏覽器中執行；您上次使用的陰影只會保留在這個瀏覽器中。
相關工具
常見問題
box-shadow 中的四個數字代表什麼？
依序是水平位移（正值會讓陰影向右移）、垂直位移（正值會讓陰影向下移）、模糊半徑（數值越大越柔和，且不能是負值），以及擴散（正值會讓陰影比方框更大，負值則會讓陰影變小）。顏色會放在最後。
如何讓陰影看起來更自然？
使用較低的不透明度，讓陰影向下移，營造光線從上方照射的效果，並結合兩個以上的圖層：在方框附近使用較小、較銳利的圖層，再搭配較遠、較大且更柔和的圖層。略微使用負值擴散，可以避免較大的模糊在側邊顯得過於明顯。
inset 有什麼作用？
它會將陰影繪製在方框內部，而不是外部，讓方框看起來像被按下去，適合用於輸入欄位和按下狀態的按鈕。
為什麼圖片上沒有顯示我的陰影？
box-shadow 是繪製在元素的方框周圍，不是繪製在圖片內部的圖形輪廓周圍。如果要為透明 PNG 加上輪廓，請改用 CSS 的 filter drop-shadow()。
免費工具・使用在瀏覽器中次・免註冊