参数
X: 0, Y: 4, Blur: 6, Spread: -1, Color: rgba(0,0,0,0.1)
CSS
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: ...;
design / 可用工具
CSS 阴影 (Box Shadow) 生成器
快速可视化生成 CSS box-shadow 代码，支持外阴影、内阴影及多层次调整。
CSSBox Shadow设计
Design Utility
CSS 阴影生成器
水平偏移 (X) 0px
垂直偏移 (Y) 10px
模糊半径 (Blur) 20px
扩散程度 (Spread) -5px
透明度 10%
预览
使用场景
- 给按钮添加阴影
- 生成卡片悬浮效果
- 多层阴影叠加设计
如何使用
- 1. 通过滑块调整 X 与 Y 偏移
- 2. 调整模糊半径和扩散程度
- 3. 选择颜色与透明度
- 4. 复制右侧生成的 CSS 代码
示例输入输出
FAQ
支持内阴影（Inset）吗？
支持，只需勾选“内阴影”即可实时查看 inset 效果。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。