CSS 工作流程
CSS box-shadow：多層陰影、內陰影與裁切
盒形陰影依元素的盒子與圓角繪製。先在預期背景上調整，再檢查實際元件的裁切、焦點提示與渲染成本。
內容更新： · 維護者與修正回報
理解四個長度與圖層順序
產生的宣告依序列出水平位移、垂直位移、模糊半徑與擴散半徑，最後是 rgba() 色彩。負位移讓陰影向左或向上；模糊半徑不可為負。負擴散會在模糊前收縮外陰影輪廓；用於內陰影時，則擴大內側輪廓，讓陰影退離邊緣。正擴散的方向相反。不透明度 0 代表透明，1 代表不透明。
各層以逗號分隔。在同為內陰影或外陰影的群組中，第一層畫在後續層之上。外陰影在背景之下，內陰影在背景之上、內容之下；重排內外陰影不會顛倒這些繪製群組。
選擇外陰影或內陰影
外陰影在盒子周圍呈現浮起感；inset 則在內距邊界內繪製，可呈現按下的表面。border-radius 影響兩者的形狀。box-shadow 依盒子繪製，不會沿圖片透明輪廓產生陰影；filter: drop-shadow() 是另一種效果。
產生器把相同陰影放在明暗表面比較。預覽底色及方角／圓角只是比較設定，不包含在輸出中。較大的陰影會縮小以放進預覽框，畫面標示的縮放比例不會改變複製的 px 數值。瀏覽器原生模糊呈現可能略有差異。
在實際版面檢查裁切
盒形陰影不會預留版面空間。較大的陰影可能蓋到附近內容；祖先元素的 overflow 或繪製隔離也可能裁切它。請測試目的元件，不要因為預覽完整，就假設實際版面也會完整。
保留適當間距、檢查祖先樣式，並確認裁切是否符合設計。不要只為了顯示一個陰影，就全域移除必要的 overflow 規則。
保留可見焦點並量測繪製成本
裝飾陰影不能證明文字對比或鍵盤焦點可見性合格。互動元素仍須有清楚的焦點提示，並在明暗背景及強制色彩模式下測試。工具卡片只是外觀示例，不是無障礙認證。
大範圍模糊、大量重複元素或動態改變陰影值，都可能增加繪製工作。本工具最多四層且不自動播放動畫，但這些限制不保證貼入專案後的效能；加入動態浮起效果前，請在支援的裝置上量測實際頁面。
了解輸入與輸出範圍
以十進位數值輸入 px：位移 −100 至 100、模糊 0 至 200、擴散 −100 至 100、不透明度 0 至 1。色彩使用六位 sRGB HEX，另有不透明度控制。空白、非有限數值、科學記號、超出範圍或不支援的 CSS 值會被拒絕，不會偷偷修正。這是工具範圍，不是 CSS 的完整語法。
刪除全部圖層可輸出 box-shadow: none;。無效欄位會阻止產生與複製；剪貼簿操作失敗時，仍可手動選取程式碼。設定只留在目前頁面的記憶體，不上傳、不儲存，也不放入分享網址。本工具不匯入任意 CSS、不編輯偽元素，也不輸出 Tailwind 類別。
.card {
box-shadow:
0 2px 4px 0 rgba(24, 32, 42, 0.12),
0 12px 32px 0 rgba(24, 32, 42, 0.1);
}
.card:focus-visible { outline: 2px solid #315460; outline-offset: 4px; }資料可信度