使用說明
真實的陰影通常不是一層。這個工具讓你疊加最多六層陰影，每層都能獨立設定水平與垂直偏移、模糊、擴散、顏色與是否內陰影，預覽會依照 CSS 的疊加順序即時呈現。預設提供從淡到重的常見卡片陰影，可以先套用再微調。
CSS / FRONTEND · 瀏覽器內處理
CSS Box Shadow 產生
調整偏移、模糊、擴散與顏色，疊出多層陰影並複製 CSS。
最多 6 層陰影。預覽底色可切換淺色、深色與透明格，方便判斷實際效果。
box-shadow: 0px 12px 32px -8px rgba(16, 24, 40, 0.28);
預設樣式
預設樣式
陰影層
操作步驟
- 選一組預設陰影，或從單層開始調整。
- 用滑桿調整偏移、模糊與擴散，並設定陰影顏色與透明度。
- 需要更立體的效果時新增第二層，再複製 box-shadow 宣告。
隱私
所有計算與預覽都在這個瀏覽器內完成，輸入不會上傳、不會保存，也不會寫進網址或紀錄。
常見問題
- 模糊和擴散差在哪裡？
- 模糊決定陰影邊緣的柔和程度，數值越大邊緣越糊；擴散則是先把陰影整體放大或縮小再繪製。常見的卡片陰影會用正的模糊搭配負的擴散，讓陰影集中在下方而不外溢。
- inset 內陰影什麼時候用？
- 內陰影畫在元素內側，常用來表現凹陷的輸入框、按下的按鈕或內縮的容器。它可以和外陰影同時存在，在同一個 box-shadow 中以逗號分隔。