所有工具
Box Shadow Generator
Generate box shadows
Generate box shadows 在您的瀏覽器中本地執行
CSS
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
About the
盒子陰影產生器透過即時預覽和 CSS 從偏移、模糊、擴散、顏色和不透明度建立陰影。人們混淆的兩個設定是模糊和擴散：模糊會柔化陰影形狀向外和向內的邊緣，而擴散會在模糊發生之前增大或縮小陰影本身的大小。負擴散可以防止軟陰影看起來像光環，這就是為什麼這裡的預設值使用一個小的負值。
Where people use the
- 為卡片、模態框和選單建立高度比例。
- 製作帶有插入陰影的按下或聚焦狀態。
- 軟化邊框而不新增真正的邊框。
- 檢查設計規範的陰影值實際上是什麼樣子。
How to use the
- 1
設定偏移量
偏移 X 將陰影向右移動，偏移 Y 將陰影向下移動。負值則相反。
- 2
設定模糊和擴散
模糊可以柔化邊緣。 Spread 在模糊之前擴大陰影；對位於元素下方而不是周圍的陰影使用較小的負擴散。
- 3
選擇顏色和不透明度
完全不透明的純黑色看起來很刺眼。低不透明度（大約在 8% 到 20% 之間）讀起來是深度而不是汙垢。
- 4
如果你想要內陰影，請勾選插入
插圖在元素內部而不是元素後面繪製陰影，這適合受壓狀態和井。
- 5
複製 CSS
此規則包括 rgba 顏色，因此可以直接將其貼到樣式表中。
提示和最佳實踐
- 兩層陰影看起來比一層厚陰影好得多。
- 保持光源一致：如果一張牌投射到右下方，那麼所有的牌都應該投射到右下方。
- 注意父級剪下陰影並隱藏溢位。
常見問題
模糊和擴散有什麼差別？
展開會在任何軟化之前改變陰影形狀的大小，正值表示增大，負值表示縮小。然後模糊按給定的半徑柔化邊緣。為了在卡片下方獲得緊密的陰影，您需要小的模糊和稍微負的擴散。
為什麼我的影子看起來又灰又髒？
因為它是高不透明度的純黑色。使用較低的 Alpha（約 0.08 到 0.2），並考慮將陰影著色為背景色調，這樣讀起來會更自然。
我可以有多個影子嗎？
是的。在同一個宣告中用逗號分隔多個陰影；它們從前到後堆疊，因此第一個在頂部。分層陰影是如何建構柔和、真實的立面效果的。
盒子陰影會影響佈局嗎？
不會。陰影繪製在元素框外，不佔用任何空間，因此可以透過隱藏溢位的父級或緊密的容器來剪裁它們。
為盒子陰影製作動畫很昂貴嗎？
是的，相對而言。更改模糊或擴散會迫使瀏覽器每幀重新繪製陰影。為了實現平滑運動，請將不透明度進行動畫處理或變換，或在兩個預渲染陰影之間進行交叉淡入淡出。