box-shadow 生成器

可视化调模糊偏移颜色，复制

预览

box-shadow: 0px 8px 16px 0px rgba(15, 23, 42, 0.12);

阴影设置

X 轴偏移：0px

Y 轴偏移：8px

模糊半径：16px

扩展半径：0px

颜色

内阴影（inset）

推荐预设

关于「box-shadow 生成器」

调卡片、按钮阴影时不用手写数值：拖动滑块即可实时预览效果，附带常用预设，复制即用。

本地处理不上传服务器免费使用

适用场景

为卡片、弹窗设计柔和投影
制作按钮的内阴影与高光效果
快速复制 box-shadow 代码到项目

使用步骤

拖动滑块调整偏移、模糊、扩展、颜色
勾选内阴影或套用预设
点击复制 CSS 代码

常见问题

数据会上传吗？

不会。生成全程在浏览器本地完成。

支持内阴影吗？

支持，开启 inset 开关即可生成内阴影语法。

颜色能用透明度吗？

可以，颜色框支持 rgba 格式，可调整透明度。

相关工具