CSS Box Shadow 陰影產生器

調整最多四層 CSS box-shadow、內陰影與不透明度，同時比較明暗預覽，並在本機複製 CSS。

02 / 陰影層

一層一層微調

1 / 4

同類型陰影中，前面的層畫在上方。選取一層後調整數值；內、外陰影可一起使用。

編輯第 1 層內陰影（inset）

選色HEX 色彩

水平位移（px）

垂直位移（px）

模糊半徑（px）

擴散半徑（px）

不透明度（0–1）

最多 4 層；位移 ±100px、模糊 0–200px、擴散 ±100px。這是編輯範圍，不是 CSS 規範限制。

03 / 即時預覽

淺色背景

深色背景

預覽縮放 82%。背景、卡片與圓角只用於比較，不包含在複製內容中。

04 / CSS

box-shadow:
  0px 8px 24px 0px rgba(24, 32, 42, 0.15);

在實際元件中確認裁切與焦點外框。設定只留在此頁，不上傳、不儲存，也不寫入網址。調整漸層背景 →

選擇範例與陰影層，調整位移、模糊、擴散、色彩與不透明度。重排圖層、比較明暗表面，再將宣告貼到你的元素。

本工具編輯 px 盒形陰影，不處理 text-shadow、drop-shadow()、偽元素或任意 CSS 匯入。請在實際元件檢查裁切、焦點可見性與繪製效能。