免费 · 无需注册 · 浏览器本地处理
CSS 盒阴影生成器:预览内阴影与外阴影
调节阴影偏移、模糊、扩散、颜色与透明度,切换内阴影或外阴影,预览后复制对应的 box-shadow 声明。
参数设置
本地处理阴影效果预览
box-shadow: 8px 12px 24px 0px rgba(0, 0, 0, 0.2);使用步骤
调整偏移、模糊、扩展、颜色、透明度与内阴影,预览后复制声明。
使用前请检查
本工具生成单层阴影;请在真实背景下检查效果和可访问性。
试一个例子
试用水平 8 像素、垂直 12 像素、模糊 24 像素制作柔和卡片阴影。
计算或处理方式
各控件直接对应 CSS box-shadow 参数,并将颜色转换成带透明度的 rgba。
常见问题
实时调整盒子阴影并复制准确的 CSS。
如何使用CSS 阴影生成器?
调整偏移、模糊、扩展、颜色、透明度与内阴影,预览后复制声明。
数据会上传吗?
工具在当前浏览器内处理输入与文件。页面访问统计不包含这些输入内容。
有哪些限制?
本工具生成单层阴影;请在真实背景下检查效果和可访问性。