滑块调节偏移模糊扩散颜色,实时预览一键复制box-shadow代码。">
返回首页
box-shadow 滑块调参 · 实时预览 · 一键复制
阴影效果

box-shadow 参数说明

box-shadow: X偏移 Y偏移 模糊 扩散 颜色:偏移控制光源方向(正值右下、负值左上);模糊值越大阴影越柔和;扩散控制阴影大小(负值收缩更精致);内阴影 inset 可做凹陷、按下效果。现代设计趋势是大模糊、负扩散、低透明度的柔和阴影,避免生硬黑边。

多层阴影:一个元素可叠加多层阴影(逗号分隔),如一层近距小阴影+一层远距大阴影,真实感更强;本工具生成的是单层写法,可在代码中自行叠加。

常见问题

为什么阴影看起来很生硬?
模糊值太小、颜色纯黑且不透明度过高都会生硬;建议模糊16以上、颜色用主题色或深灰、透明度10%-25%。
内阴影 inset 有什么用?
适合做输入框凹陷、按钮按下、卡片内嵌效果;输入框默认的 inset 阴影就是"凹进去"的观感。
阴影影响性能吗?
box-shadow 在大区域动画时可能引起重绘卡顿,动画优先用 transform/opacity;静态阴影性能无虞。