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 實現宛如霓虹燈般的發光特效。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.