CSS 盒子陰影（box-shadow）產生器

拖曳滑桿，直接在卡片上看效果，輕鬆做出 box-shadow。最多可疊加六層，做出更柔和、更真實的陰影；用 inset 做出按下去的效果；也可以從柔和、懸浮、發光、新擬物等預設組合開始。一鍵複製 CSS。

背景盒子

圓角px

陰影圖層

水平px

垂直px

模糊px

擴散px

顏色

Inset（內陰影）

不透明度%

預設組合

CSS

模糊與擴散有什麼作用？
模糊會讓陰影的邊緣更柔和，設為零則是銳利的邊緣。擴散會在模糊之前把陰影往各個方向放大，負值則會縮小，有助於讓大範圍模糊的陰影維持在元素下方。

為什麼要使用多層陰影？
真實的陰影在靠近物體處較深，越遠越淡。把小而銳利的陰影與大而柔和的陰影組合起來可以模擬這種效果，看起來比單層陰影更自然。清單中的第一層會畫在最上面。

box-shadow 會讓網頁變慢嗎？
一般使用不會。在大量元素上使用極大的模糊，或是對陰影本身做動畫，可能會拖慢效能較差的手機；如果要做動畫，請改為調整帶有陰影的偽元素的不透明度。