输入
X 偏移(px)
Y 偏移(px)
模糊(px)
扩散(px)
阴影颜色
结果
box-shadow: 0px 12px 30px -12px #667085;

Box Shadow 生成器

Box Shadow 生成器支持设置偏移、模糊、扩散和颜色,生成可复制的 CSS 阴影代码。

Box Shadow 生成器是什么

Box Shadow 生成器用于生成 CSS 阴影代码。卡片、弹窗、下拉层、按钮和悬浮工具栏都需要合适阴影来表达层级,但手写偏移、模糊和扩散值往往需要多次试错。

本工具把 X 偏移、Y 偏移、模糊、扩散和颜色拆成可调字段,并输出标准 box-shadow。适合前端开发、设计还原、组件状态调整和后台页面细节优化。

核心功能

  • 支持设置 X/Y 偏移、模糊半径、扩散半径和颜色。
  • 输出标准 box-shadow CSS 声明。
  • 结果可以直接复制到样式文件或组件中。
  • 适合卡片、弹窗、按钮、菜单和浮层阴影。

适用场景

调整工具页、后台卡片和弹窗的层级感。

根据设计标注快速生成 CSS 阴影。

统一组件 hover、focus、dropdown 等状态阴影。

使用建议

阴影不宜过重,后台和工具类页面更适合轻量、柔和的阴影。

深色背景和浅色背景上的阴影观感不同,发布前需要在真实页面检查。

常见问题

Box Shadow 生成器会上传输入内容吗?

不会。当前工具的计算、解析和转换逻辑都在浏览器本地完成,适合处理临时文本、配置片段和调试数据。

Box Shadow 生成器的结果可以直接用于线上吗?

多数结果可以作为日常开发、排版和配置参考;如果涉及生产环境、财务金额、SEO 策略或安全规则,建议结合实际业务规范再复核。