CSS 盒阴影生成器

使用方法

1. 卡片上已经有一个柔和阴影——拖动任意滑块（X/Y 偏移、模糊、扩展）、选颜色与透明度，或勾选「内阴影」做内阴影。一切实时变化，无需点击按钮。
2. 点击预设 chip（柔和浮起、强投影、内凹、霓虹辉光、双层、新拟态）即可一键载入现成效果。
3. 用「+」增加图层以堆叠阴影；每层独立编辑。一键复制完整的 box-shadow 声明。

示例

柔和浮起

box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15);

直接粘进任意选择器，例如 .card { box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15); }。「双层」预设输出两段逗号分隔的阴影；「新拟态」需要浅色背景才能看出效果。

范围、限制与常见问题

• 仅做 box-shadow：不做 drop-shadow() 滤镜、不做 text-shadow，CSS 也不支持渐变阴影——均不在范围内。
• 颜色来自取色器加透明度滑块；我们不解析用户粘贴的 CSS 颜色字符串，也就没有拼错或误读的空间。
• 新拟态依赖浅色表面——在极深背景上可能看不出效果，这是该风格本身的特性，并非缺陷。
• 不保存、分享链接不带参数：刷新即回到默认的柔和浮起。一切都在你的浏览器里完成。

相关工具

当你需要在颜色或阴影上更进一步时。