免费 · 无需注册 · 浏览器本地处理

CSS 盒阴影生成器:预览内阴影与外阴影

调节阴影偏移、模糊、扩散、颜色与透明度,切换内阴影或外阴影,预览后复制对应的 box-shadow 声明。

浏览全部工具 →

参数设置

本地处理
实时结果修改时即时更新
阴影效果预览
box-shadow: 8px 12px 24px 0px rgba(0, 0, 0, 0.2);

使用步骤

调整偏移、模糊、扩展、颜色、透明度与内阴影,预览后复制声明。

使用前请检查

本工具生成单层阴影;请在真实背景下检查效果和可访问性。

试一个例子

试用水平 8 像素、垂直 12 像素、模糊 24 像素制作柔和卡片阴影。

计算或处理方式

各控件直接对应 CSS box-shadow 参数,并将颜色转换成带透明度的 rgba。

常见问题

实时调整盒子阴影并复制准确的 CSS。

如何使用CSS 阴影生成器?

调整偏移、模糊、扩展、颜色、透明度与内阴影,预览后复制声明。

数据会上传吗?

工具在当前浏览器内处理输入与文件。页面访问统计不包含这些输入内容。

有哪些限制?

本工具生成单层阴影;请在真实背景下检查效果和可访问性。