CSS box-shadow 產生器

運作方式

Box-shadow 依特定順序接受四個數字與一種顏色，陰影看起來是有深度，還是像貼紙，差別完全在這些數字。邊拖曳邊看它變化，比憑空猜測快得多。

這四個數字的意義

依序為：水平偏移、垂直偏移、模糊半徑與擴散。偏移會移動陰影；模糊會柔化其邊緣；擴散會在模糊前放大或縮小它。負的擴散值會把陰影向內拉，這就是讓卡片下方的陰影緊貼、不從兩側滲出的方法。

讓它看起來真實

光線通常來自上方，因此小幅正向的垂直偏移、不加水平偏移，看起來比較自然。大而非常透明的陰影，呈現出柔和的深度；小而深、銳利的陰影，看起來則像剪下來的貼紙。真實物體投射的陰影，離表面越遠就越模糊，所以較大的模糊暗示元素較高。

內陰影

內陰影繪製在元素內部而非外部，被按下的按鈕、輸入欄位與內嵌面板就是這樣製作的。同樣的四個數字都適用，只是朝向內側。

同時使用多個陰影

CSS 接受以逗號分隔的清單，疊上兩層（一層緊而深，一層寬而淡）看起來比單一陰影好得多。本產生器只產生一個；若要疊層效果，請自行把兩個貼在一起。