CSS 產生器

Box Shadow 陰影產生器

透過直覺的視覺化編輯器，輕鬆建立精美的 CSS Box Shadow。 支援多重陰影疊加、Inset 內陰影，所有操作即時預覽。

陰影列表
陰影屬性
內陰影 (Inset)
陰影顏色
HEX
RGB
HSL
Alpha %
預設樣式
即時預覽
寬 高
CSS 程式碼
box-shadow: 4px 4px 10px 0px rgba(30, 41, 59, 0.75);

功能特色

多重陰影疊加
內陰影 / 外陰影
即時預覽
35+ 預設樣式
顏色選取器
一鍵複製 CSS
匯出 PNG
復原 / 重做
響應式預覽

使用說明

  1. 調整 水平偏移 (X) 與 垂直偏移 (Y) 來定位陰影位置。
  2. 增加 模糊半徑 讓陰影更柔和，調整 擴散半徑 控制陰影大小。
  3. 選擇 陰影顏色 並調整 透明度 (Alpha)。
  4. 切換 內陰影 (Inset) 製作內部陰影效果，新增多層陰影創造複雜效果。
  5. 瀏覽 預設樣式 或點擊 隨機 按鈕獲取靈感。
  6. 複製 CSS 程式碼 或 下載 PNG 用於您的專案中。

常見問題

什麼是 CSS box-shadow？
CSS box-shadow 是為元素添加陰影效果的屬性。它包含水平偏移、垂直偏移、模糊半徑、擴散半徑、顏色，以及可選的 inset 關鍵字用於內陰影。多個陰影可用逗號組合。
如何建立多重陰影？
點擊 新增陰影 按鈕即可添加另一個陰影圖層。每個圖層擁有各自的屬性，使用 上下箭頭 調整順序，所有圖層會合併為單一 box-shadow CSS 值。
什麼是內陰影 (Inset)？
內陰影 (inset) 會出現在元素內部，產生凹陷或按壓的效果。切換 Inset Shadow 開關可在內陰影與外陰影之間切換。
這些陰影可以正式上線使用嗎？
可以！產生的 CSS 使用標準 box-shadow 語法，支援所有現代瀏覽器，包括 Chrome、Firefox、Safari 和 Edge，可直接用於正式環境。
這個工具是免費的嗎？
是的，完全免費，無需註冊。所有處理都在您的瀏覽器中本地執行 — 不會傳送任何資料到伺服器，您的陰影設定絕不外流。

瀏覽器相容性

Chrome 10+
Firefox 4+
Safari 5.1+
Edge 12+
Opera 10.5+
iOS Safari 5+
Android 4.4+
IE 10+

隱私說明

此工具完全在您的瀏覽器中執行。您建立的任何資料、顏色或陰影都不會傳送到任何伺服器。所有工作都留在您的裝置上。我們不會對這個工具使用 Cookie 或追蹤功能。