CSS 盒阴影生成器 使用指南

box-shadow 用偏移、模糊、扩散与颜色定义元素投影。拖拽调节各参数，实时看效果并复制生成的 CSS，前端必备。

核心功能

• 偏移 X/Y/模糊/扩散滑杆
• 颜色与透明度选择
• 内阴影 inset 开关
• 实时预览
• 一键复制 CSS

适用场景

• 卡片悬浮投影设计
• 按钮立体感
• 分隔层次

使用步骤

1. 调节 X/Y 偏移与模糊
2. 选阴影颜色
3. 开 inset 做内阴影
4. 复制 CSS 到项目

实用技巧

• X/Y 同 0、模糊大→柔和弥散阴影
• inset 做内凹效果
• 避免过度投影显脏

常见问题

inset 是什么？

加 inset 阴影变为元素内部，营造内凹。

能给个例子吗？

box-shadow: 0 4px 12px rgba(0,0,0,.15) 是常见卡片投影。