CSS box-shadow 產生器
透過直覺的介面輕鬆產生高質感的 CSS 陰影 (box-shadow)。
支援多層次陰影疊加，且完全相容最新的設計趨勢的免費工具。
圖層設定
陰影參數設定
預覽效果
關於本工具
「CSS box-shadow 產生器」是一款免費的線上工具，透過直覺的圖形化介面，讓您輕鬆打造網頁設計中不可或缺的陰影效果 (box-shadow)。
不只是單一的簡單陰影，本工具支援疊加多層陰影，讓您可以快速套用如 Apple 風格的柔和漸層陰影、立體感十足的新擬物化 (Neumorphism)，或是扁平強烈的新粗野主義 (Neo Brutalism) 等現代網頁設計常見的預設集。
產生出的程式碼提供三種輸出格式：標準 CSS 屬性、CSS 自訂變數 (Custom Properties)，以及 Tailwind CSS 實用類別 (支援自訂任意值 [Arbitrary values])，只要點擊即可一鍵複製，馬上運用到您的專案之中。
使用方法
從頂部的預設集中，挑選一個最符合您心目中藍圖的效果。當然，您也可以直接從零開始，透過「新增圖層」來建立專屬陰影。
調整 X/Y 軸的偏移量 (位置)、模糊程度、擴散範圍、陰影顏色以及不透明度。善用「新增圖層」來疊加多個陰影，能讓整體效果看起來更自然且具有高級感。
根據您的開發環境，在右側的程式碼輸出區塊選擇「CSS」或「Tailwind」格式，最後按下複製按鈕即可順利取得產生的語法。
屬性說明
box-shadow 的語法與屬性說明
box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;- offset-x / offset-y
- 陰影的水平與垂直位置偏移量。正值會讓陰影往右/往下移動，負值則會往左/往上移動。
- blur-radius (模糊半徑)
- 決定陰影的模糊程度。數值越大，陰影就會越模糊且顏色越淡；若設為 0 則會產生邊緣銳利的實心陰影。
- spread-radius (擴散半徑)
- 用來擴大或縮小陰影本身的尺寸。正值會讓陰影面積比元素本身還大，負值則會縮小。
- inset (內陰影)
- 加上這個關鍵字後，陰影會落在元素的內部而非外部。常被用來表現凹陷的立體感。
常見問題
Q.box-shadow 會影響網頁效能嗎？
Q.box-shadow 跟 filter: drop-shadow() 有什麼差別？
Q.inset (內陰影) 通常用在什麼地方？
Q.疊加多層陰影有什麼好處？
使用場景
卡片 UI 與彈出視窗 (Modal)
透過陰影讓元素從背景浮現出來，在視覺上告訴使用者這是可以點擊的互動元素，或是層級較高的重要內容。
按鈕的互動狀態 (Hover / Active)
當滑鼠懸停 (Hover) 時加深陰影擴散，或是在點擊 (Active) 時切換為內陰影 (inset)，藉此營造出真實的按壓回饋感。
新擬物化 (Neumorphism) 設計
在與背景同色的元素上，分別在對角配置「高光 (亮色陰影)」與「暗角 (深色陰影)」，即可創造出彷彿元素被凸起或壓平的奇妙質感。
發光效果 (Glow)
將 X/Y 偏移量設為 0，並增加擴散半徑與鮮豔顏色的陰影，就能不借助圖片、單靠 CSS 實現宛如霓虹燈般的發光特效。
發送反饋
請告訴我們您的想法，以幫助我們改進工具。
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.