0px
10px
20px
0px
25%
结果仅供参考，可能包含错误。请自行核实重要信息。使用本工具风险自负。
这个工具能做什么
CSS 阴影（Box Shadow）生成工具通过滑块调整水平偏移、垂直偏移、模糊、扩散、颜色和不透明度，生成 CSS box-shadow。拖动滑块时预览框实时更新，输出的代码行可直接复制。初始状态是一个柔和的阴影：向下偏移 10px、模糊 20px、25% 不透明度的黑色。
四个长度值按 CSS 顺序书写：X 偏移、Y 偏移、模糊半径、扩散半径。正偏移值使阴影向右、向下移动，负值则向左、向上移动。模糊使边缘变柔和，扩散则在模糊之前放大或缩小阴影。颜色以 rgba() 形式输出，不透明度已包含在内，阴影可以与任何背景自然融合。
适用场景
- 在扁平化设计中为卡片、模态框和下拉菜单增加层次感。
- 匹配 Material Design 等设计系统的层级（elevation）规范。
- 为按钮添加细微的聚焦或悬停效果。
- 使用零偏移和鲜艳的颜色制作彩色发光效果。
示例
输入
X 偏移 0，Y 偏移 10，模糊 20，扩散 0，颜色 #000000，不透明度 25%输出
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);关于这个工具的问题
怎样做内阴影？
在值的开头加上关键字 inset：box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.25);。这样阴影会绘制在盒子内部，适合按下状态的按钮和输入框。
可以叠加多个阴影吗？
可以，用逗号分隔即可。逼真的层级效果通常用两层：一层小而锐利的阴影勾勒边缘，一层大而柔和的阴影表现深度，例如 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.12)。
为什么阴影在彩色背景上显得灰暗发脏？
低不透明度的纯黑会降低下方颜色的饱和度。改用背景色的深色调代替黑色，效果会更干净。
阴影会拖慢页面吗？
静态阴影开销很小。在性能较弱的设备上，为大面积模糊阴影添加动画可能导致掉帧；更好的做法是把阴影放在伪元素上，对其 opacity 做动画。
这个工具免费吗？
是的，完全免费。无需注册或电子邮箱。结果直接显示在本页。
如何获取结果？
在此页面使用工具即可查看结果，无需通过电子邮件接收。