免费在线 CSS 盒子阴影生成器
拖动滑块调节水平偏移、垂直偏移、模糊、扩散、颜色与内阴影，实时预览并一键复制 box-shadow 代码。
核心功能
全参数可调
水平/垂直偏移、模糊半径、扩散范围、颜色全部实时调节。
内阴影
一键切换内阴影效果，模拟凹陷、浮雕等立体层次。
预设效果
内置卡片、按钮、悬浮、霓虹等常用阴影，一键套用再微调。
代码即拿
实时生成标准 CSS 代码，点击复制直接用于你的项目。
三步搞定
1
选择预设或手调
从预设阴影开始，或直接拖动滑块自定义。
2
微调参数
调整偏移、模糊、颜色、内阴影，预览区实时反馈。
3
复制代码
点击「一键复制」得到 box-shadow 代码，粘贴到你的 CSS 里。
常见问题
box-shadow 代码怎么用？
把复制的声明粘贴到元素的 CSS 规则里即可，例如 .card { box-shadow: 复制的值; }。
内阴影和外阴影有什么区别？
外阴影在元素边缘外侧，内阴影（inset）在元素内侧，适合做凹陷、浮雕、按钮按下效果。
能生成多层阴影吗？
当前版本生成单层阴影。你可以复制代码后，在 CSS 里用逗号分隔叠加多层阴影。
支持透明背景预览吗？
预览区会自动跟随站点明暗主题，阴影颜色建议选择对比明显的颜色以便观察效果。