視覺化設計 CSS 陰影
陰影能為介面帶來層次感：它們能讓卡片浮凸於頁面之上、顯示按鈕的點擊狀態，並將對話框與背景內容區隔開來。CSS 的 box-shadow 屬性功能強大，但要憑空調整五個數值並不容易。這款產生器提供滑桿與即時預覽功能，允許你疊加多層陰影以呈現自然的效果，並能產出乾淨的 CSS 程式碼，讓你直接貼上到專案中使用。
功能特色
- 位移 (Offset)、模糊 (Blur)、擴散 (Spread)、顏色與透明度控制項，支援即時預覽。
- 最多可達五層陰影，合併為單一
box-shadow宣告。 - 內陰影 (Inset) 效果，適用於按壓與凹陷的視覺設計。
- 圓角 (Corner radius) 與預覽顏色設定，完美契合你的設計風格。
- 預設樣式：提供柔和、中等、強烈、多層次、內陰影與發光等陰影效果。
- 一鍵複製 CSS，顏色採用
rgba()格式。
範例
在淺色背景上看起來很自然的多層次陰影：
.card {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.07),
0px 4px 8px 0px rgba(0, 0, 0, 0.07),
0px 16px 32px 0px rgba(0, 0, 0, 0.07);
border-radius: 16px;
}
陰影設計技巧
| 目標效果 | 建議設定 |
|---|---|
| 白色背景上的柔和卡片 | y 4, 模糊 12, 透明度 8% |
| 浮動下拉選單或對話框 | 2–3 層，y 最高 24，模糊最高 48，每層透明度 7–12% |
| 復古「扁平化」風格 | x 6, y 6, 模糊 0, 透明度 100% |
| 焦點或發光效果 | x 0, y 0, 模糊 16–24, 擴散 2–4, 品牌色 |
| 按壓狀態的輸入框 | 內陰影 (inset), y 2, 模糊 6, 透明度 25–30% |
保持光源一致：如果某個元件的陰影朝下，那麼所有元件的陰影也都應該朝下。
相關工具
使用 CSS 漸層產生器 製作卡片背景，透過 色碼轉換器 在 HEX、RGB 與 HSL 之間轉換顏色，或是使用 圖片選色器 從截圖中擷取顏色。