輕鬆創建漂亮的 CSS 框陰影
使用我們直觀的介面生成令人驚歎的框陰影。複製 CSS 代碼並立即在您的專案中使用它。
Preview
長方體陰影
定製我
CSS 輸出
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
陰影控制
Position
0px
4px
Size
6px
-1px
Color
10%
Options
Presets
柔和陰影
中等陰影
重影
內陰影
銳利對角線
輪廓發光
雙重陰影
Lifted 效果
如何使用
基本控制
- 調整水準偏移向左或向右移動陰影
- 調整垂直偏移向上或向下移動陰影
- 增加模糊半徑使陰影更柔和
- Use 擴散半徑增大或減小陰影的整體大小
- 更改Color and Opacity自定義陰影外觀
高級功能
- Enable Inset Shadow創建內陰影效果
- Use 多個陰影用於更複雜的效果
- 保存和載入Presets用於快速存取您最喜歡的陰影
- Click Random Shadow尋找靈感
- 複製生成的 CSS 代碼並將其粘貼到您的專案中