阴影生成器
使用交互式可视化编辑器设计CSS盒子阴影，并复制生成的样式代码。
设计工具 · ToolBox
工具介绍
CSS 的 box-shadow 参数多、效果靠想象，手写数值很难一次调到位。这个阴影生成器提供可视化编辑：拖动滑块调整偏移、模糊、扩展和颜色，效果实时呈现在预览盒子上，调好后一键复制生成的 CSS 代码。适合前端开发和 UI 设计师快速调出卡片、按钮的阴影质感，省掉反复改代码刷页面的过程。
使用步骤
- 打开页面，用滑块调整水平偏移、垂直偏移、模糊半径和扩展范围
- 选择阴影颜色、透明度，并决定是否使用内阴影
- 在预览区实时观察盒子的阴影效果，微调至满意
- 复制生成的 box-shadow 代码，粘贴到你的样式表中
常见问题
可以制作多层阴影吗？
可以叠加多组阴影参数营造更立体的层次感，复制代码时各层会以逗号分隔输出；建议控制在两三层以内，避免过度渲染影响页面性能。
生成的代码兼容哪些浏览器？
box-shadow 是标准 CSS3 属性，所有现代浏览器均支持；如需兼容非常老旧的 IE 版本，请自行评估降级方案。
内阴影怎么设置？
勾选 inset（内阴影）选项即可，生成的代码会自动加上 inset 关键字，常用于拟物风格按钮或输入框的凹陷效果。