CSS Box Shadow 生成器
視覺化設定多層 box-shadow，調整 X/Y 偏移、模糊半徑、擴散半徑、顏色與透明度，即時預覽並複製 CSS 程式碼。
陰影層設定
14px 4px 16px
外內
預覽
CSS
box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.25);
視覺化設定多層 box-shadow，調整 X/Y 偏移、模糊半徑、擴散半徑、顏色與透明度，即時預覽並複製 CSS 程式碼。
box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.25);
box-shadow 的參數依序為：X 偏移（正值往右）、Y 偏移（正值往下）、模糊半徑（數值越大越模糊）、擴散半徑（正值放大陰影範圍，負值縮小）、顏色。加上 inset 關鍵字則變為內陰影。
可以。CSS box-shadow 支援多層疊加，各層之間用逗號分隔。先宣告的層會顯示在上方。多層陰影可製作出更豐富的立體感與光暈效果。
inset 使陰影從元素外部改為顯示在內部，常用於製作按下（pressed）效果或凹陷感。此工具每層陰影都可以個別切換 inset 開關。
使用 rgba() 可以分別設定陰影的顏色與透明度，讓陰影更自然地與背景融合。相較於直接使用 hex 色碼，rgba 的透明度控制讓陰影效果更細膩。