阴影生成器
可视化调整偏移、模糊、扩散、颜色和透明度，生成 CSS box-shadow 代码。
阴影预览
CSS 代码
box-shadow: 0px 18px 36px -8px rgba(17, 24, 39, 0.18);
本工具完全在浏览器本地运行，输入内容不会被上传。
如何使用
- 1拖动滑块调整水平和垂直偏移
- 2设置模糊、扩散、颜色与透明度，按需开启内阴影
- 3在预览中确认效果，复制 CSS 代码
常见问题
扩散（spread）是什么？
扩散会让阴影整体放大或缩小。负值可以做出更贴合的投影，常配合较大的模糊值使用。
内阴影怎么实现？
开启 inset 后，阴影绘制在元素内部，常用于输入框和卡片的凹陷效果。
为什么预览和实际页面略有差异？
预览元素有固定圆角和背景，实际阴影效果还受元素圆角、背景色和层叠上下文影响。