Box Shadow 產生器

拖曳位移、模糊與擴散即時預覽陰影效果,輸出可直接貼進樣式表的 box-shadow 語法。

瀏覽器端執行:輸入與輸出不會傳送到伺服器,平台也不會保存你的輸入內容。

輸入

內容不會被保存
0
12
24
-6
25

輸出

填入左側欄位後按下執行。

使用方法

  1. 1調整位移、模糊與擴散。
  2. 2選擇顏色與不透明度。
  3. 3複製 box-shadow 語法。

常見問題

為什麼輸出是 rgba?

顏色與不透明度會合併成 rgba(),方便直接調整陰影濃淡而不必另外設定透明度。

spread 是什麼?

擴散值會等比放大或縮小陰影範圍,負值可讓陰影僅出現在元素下方,常用於卡片。

可以疊多層陰影嗎?

可以,複製多組結果後以逗號串接即為多層陰影。