CSS 陰影生成器 (含即時預覽)
六種常見陰影預設 (柔和、卡片、抬升、發光、新擬態、內陰影)。用滑塊微調所有引數, 即時預覽結果, 複製即用 CSS。
運作原理
陰影的五個引數
X 偏移: 水平位移。正值使陰影向右移動, 負值向左。對於來自左上方的光照 (典型 UI 假設), 小的正 X 模擬左上光源。
Y 偏移: 垂直位移。正值使陰影向下移動, 模擬上方光源。幾乎所有 UI 陰影都用正 Y。
模糊半徑: 陰影邊緣的柔和程度。0 = 銳邊 (罕見)。8-30px 對卡片和按鈕典型。更高值產生夢幻、柔和的陰影。
擴散: 均勻放大或縮小陰影。正值使陰影比元素更大; 負值縮小。負擴散結合偏移產生「抬升」效果。
顏色/不透明度: 陰影通常是低不透明度 (10-30%) 的黑色。彩色陰影流行但難用好。匹配你的背景明度範圍 — 在深色 UI 上太黑的陰影消失, 在亮色 UI 上太亮的陰影對比不足。
內陰影
內陰影繪製在元素內側而非外側。用途: 按下按鈕狀態、凹陷輸入框、新擬態「3D 下沉」效果。
內陰影遵守元素的圓角並忽略溢位。對在不改實際佈局的情況下給扁平 UI 元素加視覺深度有用。
新擬態與「軟 UI」趨勢
新擬態 (2020-2022 流行) 用兩個相反的陰影 — 一個亮、一個暗 — 讓元素從同色背景上像擠出。我們的「新擬態」預設顯示單個深色陰影; 完整新擬態結合相反側的淺色內陰影: 'inset -8px -8px 20px rgba(255,255,255,0.5), 8px 8px 20px rgba(0,0,0,0.12)'。
注意: 純粹的新擬態有無障礙問題 — 缺乏對比使元素難以區分。現代設計審慎使用, 常與傳統陰影結合。
常見問題
›可以加多個陰影?
CSS 支援逗號分隔的多陰影: 'box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)'。我們的工具一次生成一個; 手動結合多個。
›怎麼做新擬態效果?
右下深色陰影與左上淺色陰影結合, 都內陰影或都外陰影。例: '8px 8px 20px rgba(0,0,0,0.12), -8px -8px 20px rgba(255,255,255,0.7)'。預設顯示深色一半; 手動加淺色陰影。
›模糊和擴散區別?
模糊柔化陰影邊緣 (透明度漸變)。擴散改變陰影整體尺寸 (大於或小於元素)。blur=20 spread=0 是元素尺寸的柔和發光; blur=0 spread=20 是大於 20px 的硬陰影。
›為什麼我的陰影看起來平?
可能不透明度太低、無偏移、或陰影色太接近背景。試 Y=8、blur=24、opacity=0.18 作起點 — 這些值在多數亮色背景上可見。
›可以用於 text-shadow?
幾乎可以 — text-shadow 用相同語法但減去「擴散」和「inset」。複製後手動調整: 取 'X Y blur color' (去擴散和 inset)。
›陰影效能如何?
box-shadow 在現代瀏覽器 GPU 加速。許多元素上的許多陰影仍可能減慢滾動。卡片和按鈕上的單陰影: 無憂。
›應該用陰影還是邊框?
都有用。邊框更銳利更無障礙。陰影看起來更柔和/更抬升。現代偏扁平的 UI 常都用: 細邊框求銳利 + 柔和陰影求抬升。
›資料會上傳嗎?
不會。所有預覽和 CSS 生成在本地; 不向伺服器傳送。
相關工具
最後更新: