预览
CSS 代码
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
预设样式
阴影层
阴影参数
在线 CSS box-shadow 生成器，可视化调节 X/Y 偏移、模糊、扩展、颜色和内外阴影，支持多层阴影叠加与预设样式，实时预览并一键复制 CSS 代码，免费在浏览器本地运行，无需安装。
先填写或调整「背景色」、「方块色」、「尺寸 (px)」、「圆角 (px)」、「阴影颜色」；修改输入或使用页面控件后查看结果区域。可先用「尺寸 (px)」中的示例 「160」熟悉输入格式，再替换成自己的数据。
「尺寸 (px)」的输入范围为 40～300。「圆角 (px)」的输入范围为 0～150。请按字段标注的单位输入，先检查超出范围、空值和小数点，再核对结果。
先用最小示例验证，再将结果放回实际开发环境检查。语言版本、运行环境、编码和配置项可能与浏览器中的处理规则不同。
本页的主要处理逻辑在浏览器内执行。页面加载资源、打开外部链接，以及带外部地址的内容预览仍可能产生网络请求；“本地处理”并不表示整个网页完全没有网络活动。此页还使用浏览器本地存储保留内容或设置，共用设备上请在使用后检查保存的记录；清除站点数据会一并删除本地记录。使用分享或复制链接前，请检查链接中是否带有输入内容。
先检查「背景色」、「方块色」、「尺寸 (px)」是否完整，以及格式、单位和当前选项是否匹配。修改输入后，查看页面的结果或错误提示；可先用少量数据定位问题。
CSS 盒子阴影生成器 · Neumorphism 生成器 · CSS 动画生成器 · Border Radius 生成器 · 全部开发工具