已复制

CSS 阴影生成器

Box Shadow 可视化编辑器,支持多层阴影叠加

CSS 代码
box-shadow: 10px 10px 20px rgba(0,0,0,0.3);
使用说明
调节阴影参数
通过滑块和颜色选择器调节阴影的六个属性:水平偏移(X轴方向)、垂直偏移(Y轴方向)、模糊半径(越大越模糊)、扩散半径(阴影大小)、阴影颜色(含透明度)、内阴影(inset 开关)。左侧预览方块实时显示效果。
多层阴影叠加
点击「+ 添加阴影层」按钮创建新的阴影层。通过顶部的图层标签切换不同层进行编辑。支持同时查看多层阴影叠加效果。点击图层标签上的关闭按钮可删除该层(需保留至少 1 层)。
复制 CSS 代码
面板底部实时展示生成的 box-shadow CSS 代码,多层阴影以逗号分隔。点击「复制代码」即可一键复制到剪贴板。