🔲
盒子阴影生成器
可视化生成CSS box-shadow
阴影
阴影 1
5px
5px
15px
0px
box-shadow: 5px 5px 15px 0px #00000040;盒子阴影生成器提供可视化编辑器，通过滑块和颜色选择器直观调整CSS box-shadow的偏移、模糊、扩展和颜色参数。支持多层阴影叠加，可为卡片、模态框、弹出层等UI组件营造立体感和层次感。还支持Inset内阴影选项，生成的CSS代码可直接复制到项目中使用。
📖 使用方法
- 调整X、Y偏移设置阴影位置
- 用模糊和扩散调整阴影大小
- 选择颜色
- 添加多个阴影创建层叠效果
✨ 主要功能
- ✓可视化编辑器
- ✓多层阴影
- ✓支持Inset选项
- ✓实时预览
- ✓自动生成CSS代码
💡 使用场景
- •UI设计师：可视化调整Material Design或Neumorphism风格的卡片阴影效果并应用到设计系统中。
- •前端开发者：实时测试按钮hover和active状态的阴影值，直接复制CSS代码。
- •网页制作者：为模态对话框和下拉菜单创建恰当的深度和层次阴影效果。
- •CSS艺术家：通过叠加多层阴影制作逼真的3D效果或发光效果。
- •设计初学者：直观理解box-shadow各参数（offset、blur、spread）的作用。
🎯 使用技巧
- ▸自然阴影的关键：blur值设为spread的2-3倍，颜色使用半透明而非纯黑。
- ▸多层阴影中，近处阴影用小blur，远处阴影用大blur，模拟真实光照效果。
- ▸组合Inset阴影和普通阴影可以创建按下按钮或Neumorphism效果。
- ▸阴影颜色建议使用背景色的深色调而非纯黑（#000），效果更自然。
- ▸卡片UI的Y偏移量设置大于X偏移量，可以营造自然的底部阴影效果。
❓ 常见问题
Q. Inset是什么？
A. Inset将阴影显示在盒子内部，常用于创建按压效果。
Q. 如何使用多重阴影？
A. 点击添加阴影按钮可以叠加多个阴影层，创建立体效果。
Q. box-shadow和drop-shadow滤镜有什么区别？
A. box-shadow应用于元素的矩形盒模型，而filter: drop-shadow()会沿着元素的实际形状（排除透明区域）生成阴影。对于PNG图片等不规则形状，drop-shadow更合适。
Q. box-shadow会影响布局吗？
A. box-shadow不影响元素的布局尺寸。但在overflow: hidden的父元素中可能会被裁剪，需要注意。
Q. 如何创建Neumorphism效果？
A. 同时应用两个阴影：一个接近背景色的浅色阴影（左上方）和一个深色阴影（右下方）。使用适度的blur和较小的spread值可以创建柔和的Neumorphism效果。