❏
CSS 阴影生成器
可视化调节偏移、模糊、扩展与颜色,实时预览并一键复制 box-shadow 代码。
本地处理 · 不上传
加载工具中…
相关：阴影生成 · box-shadow · CSS阴影 · 盒子阴影
CSS 阴影生成器通过滑块调整偏移、模糊、扩散与颜色，实时预览并输出 box-shadow 代码，支持叠加多层阴影做出层次感。
使用步骤
- 调整偏移、模糊与扩散
- 设置阴影颜色与透明度
- 按需添加多层阴影
- 复制生成的 CSS
使用场景
- 为卡片与弹窗设计投影
- 制作按钮的按下与悬浮状态
- 做内阴影实现凹陷效果
- 调试已有阴影的具体数值
小贴士
- 真实的阴影是多层叠加的：一层小而清晰贴近元素，一层大而弥散拉开距离，单层阴影往往显得生硬。
- 阴影颜色不要用纯黑，用带一点背景色相的深色（如深蓝灰）会自然得多。
- inset 关键字把阴影变成内阴影，常用于输入框的凹陷感与按钮的按下态。
常见问题
扩散和模糊有什么区别？
模糊控制边缘的柔和程度，扩散在模糊之前先把阴影整体放大或缩小。负扩散配合正偏移可以做出只在一侧露出的阴影。
阴影会影响布局吗？
不会。box-shadow 绘制在元素盒子之外，不占据空间也不推开相邻元素，这点与 border 不同。
多层阴影的顺序有影响吗？
有。先写的阴影绘制在上层，后写的在下层。通常把小而深的阴影写在前面，大而淡的写在后面。
CSS 阴影生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 阴影生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。