盒阴影生成器
CSS box-shadow属性在线生成工具
Box Shadow 阴影生成器可视化调整偏移、模糊、扩散、颜色等参数，支持多层阴影叠加，一键生成 CSS 代码。
Box Shadow 生成器
预览
HEX: #00000040
RGBA: rgba(0, 0, 0, 0.25)
单层: 5px 5px 10px 0px #00000040
CSS 代码
.box {
box-shadow: 5px 5px 10px 0px #00000040;
}使用说明
调整阴影参数实时预览效果，生成可复制的CSS代码。支持内阴影和多层阴影。
使用步骤
- 调整阴影参数：偏移 X/Y、模糊半径、扩散半径、颜色。
- 支持多层阴影，点击「添加图层」叠加效果。
- 实时预览阴影效果。
- 复制生成的 CSS 代码。
常见问题
inset 内阴影和普通阴影有什么区别？
普通阴影向外扩散，内阴影向元素内部投射，常用于输入框聚焦、按钮按下等效果。
多层阴影如何实现？
CSS box-shadow 属性支持逗号分隔多个阴影值，本工具提供图层管理，可视化管理多层效果。
阴影颜色推荐用什么格式？
推荐 rgba 或 hsla 格式，方便设置透明度。纯黑阴影生硬，常用 30%-50% 透明度的深灰色。