CSS 阴影生成器_在线可视化调box-shadow
可视化调节 box-shadow 阴影，一键复制 CSS 代码
常见问题
- 多层阴影怎么写？
- CSS 的 box-shadow 支持逗号分隔多层，前面的层叠在后面的层之上。本工具可逐层调整后合并输出。
- box-shadow 和 filter: drop-shadow 有什么区别？
- box-shadow 沿元素边框盒绘制，适合矩形卡片；drop-shadow 沿实际像素轮廓绘制，适合不规则图形和透明 PNG。
- 生成的 CSS 兼容性如何？
- box-shadow 是 CSS3 标准属性，主流浏览器均完整支持，无需加厂商前缀。
使用说明
- 拖动滑块调整水平偏移、垂直偏移、模糊、扩散四个参数，数值实时显示。
- 选择颜色并调整透明度，或切换外阴影 / 内阴影 inset。
- 上方预览区会实时显示阴影效果。
- 「CSS 代码」框自动生成可用的 box-shadow 代码，点「复制代码」直接粘贴进样式表。
常见用途：调页面卡片的悬浮感、做按钮立体效果、设计弹窗投影、快速出可复用的 CSS 代码。
免责声明
本工具的生成结果由程序自动产生，其准确性、唯一性、适用性不作任何明示或暗示的保证。请勿将生成的二维码、密码、UUID 等内容用于伪造证件、冒用他人身份、侵犯他人合法权益或其他违法违规用途。生成的密码请自行妥善保管，并建议配合密码管理器使用——本工具不保存、无法找回任何生成内容。本工具为免费公益项目，按「现状」提供，不对因使用本工具产生的任何直接或间接损失承担责任。如发现结果异常，欢迎通过追风导航主站反馈，我们会尽快修复。