CSS 陰影產生器
用位移、模糊、擴散、顏色與 inset 控制做出 CSS box-shadow，在卡片上即時預覽並複製完整宣告。不需要註冊，也不會上傳任何資料。
陰影設定
CSS 輸出
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.18);box-shadow 在做什麼
box-shadow 會在元素後方畫出陰影，加上 inset 關鍵字則畫在元素內部。它接受兩個位移、模糊半徑、擴散半徑與顏色，這幾個數值一起決定陰影的位置、柔和程度與大小。
因為這個值就是純 CSS，工具直接顯示你可以貼上的完整宣告。一次產生一層陰影，多層可以用逗號自行組合。
如何製作 box-shadow
- 拖動水平位移與垂直位移決定陰影位置，正值代表往右、往下。
- 提高模糊讓陰影更柔和；擴散可以在模糊前放大或縮小陰影，負值會讓它更收斂。
- 選好顏色後降低透明度，陰影會更自然。
- 需要內陰影就勾選 inset，滿意後複製 box-shadow 宣告。
box-shadow 範例
柔和卡片陰影
0 2px 8px 0，黑色 12%
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
浮起面板
0 10px 25px -5px，黑色 30%
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
內凹效果
inset、0 2px 6px 0，黑色 18%
box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.18);
UrsaKit 與其他陰影產生器比較
| 比較項目 | UrsaKit | cssgenerator.org | html-css-js.com | box-shadow.dev |
|---|---|---|---|---|
| 費用 | 免費 | 免費，含廣告 | 免費 | 免費 |
| 即時預覽卡片 | 有 | 有 | 有 | 有 |
| 原生取色器 | 有 | 無 | 無 | 有 |
| 內陰影 | 支援 | 支援 | 支援 | 部分 |
| 頁面自帶說明 | 有 | 部分 | 有 | 無 |
| 上傳任何內容 | 不會 | 不會 | 不會 | 不會 |
常見問題
常見問題
四個數值分別是什麼？
依序是水平位移、垂直位移、模糊半徑與擴散半徑。位移決定方向，模糊讓邊緣變柔，擴散則在模糊前放大或縮小陰影。
擴散用負值有什麼效果？
負的擴散會在模糊前把陰影縮小，設計系統常用它避免大範圍柔和陰影溢出元素之外。
什麼時候該用 inset？
inset 會把陰影畫在元素內部，適合輸入框、凹槽與按下狀態，而不是浮起的卡片。
可以同時疊多層陰影嗎？
可以。這個工具一次產生一層，複製後在 CSS 裡用逗號追加其他層即可。
需要加瀏覽器前綴嗎？
不需要。box-shadow 在現行瀏覽器都不需要前綴，已行之有年。
設定的內容會被上傳嗎？
不會。陰影值在瀏覽器內組合，不會送到任何伺服器。