線上 CSS 陰影產生器
透過視覺化滑桿微調各種陰影數值,並產生相應的 CSS `box-shadow` 陰影屬性代碼。完全在本機端運行。
陰影屬性微調
陰影類型 (Type)
水平偏移 (Offset X)10 px
垂直偏移 (Offset Y)10 px
模糊半徑 (Blur Radius)20 px
擴散半徑 (Spread Radius)0 px
不透明度 (Opacity)25%
陰影預覽與 CSS 代碼
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);
陰影參數說明
水平/垂直偏移 (Offset X / Y):
設定陰影相對於元素的水平與垂直位移距離。正值往右/下,負值往左/上。
模糊半徑 (Blur Radius):
設定陰影邊緣的模糊程度。數值越大陰影越模糊且擴散範圍更大;設定為 `0` 則呈現如同實體色塊般的硬邊陰影。
擴散半徑 (Spread Radius):
設定陰影本身的物理放大或縮小量。正值會擴大陰影的尺寸,負值會縮小陰影的尺寸。
內陰影 (Inset):
切換陰影的方向。預設外陰影(Outset)是向外投射,而內陰影(Inset)則是向元素內部凹陷投射,能營造出浮雕或按鈕凹陷的擬物感。