CSS 盒阴影生成器

使用方法

1. 添加图层 — 点击「添加图层」，在同一元素上叠加多层阴影。
2. 调整几何参数 — 用滑块或数字输入框设置水平偏移、垂直偏移、模糊半径和扩展半径。
3. 选择颜色 — 挑选阴影颜色并微调不透明度，营造细腻自然的层次感。
4. 切换内阴影 — 需要凹陷效果时，将任意图层切换为内阴影。
5. 复制 CSS — 复制生成的 box-shadow 声明，粘贴到你的样式表中。

功能特点

• 无限图层 — 自由添加、复制、删除阴影图层，每层独立配置。
• 滑块 + 数字双输入 — 拖动滑块快速试效果，或输入精确像素值。
• 实时预览 — 在可自定义背景色的演示方块上即时查看每一处修改。
• 内阴影支持 — 轻松实现按下、浮雕或新拟物（neumorphism）风格。
• 100% 客户端运行 — 所有计算都在浏览器中完成，数据不会离开你的设备。

使用场景

• 卡片设计： 为卡片和弹窗叠加多层柔和阴影，在任何背景上都显得自然。
• 新拟物风格： 组合明暗两层内阴影，无需手写 CSS 即可实现柔和的凸起效果。
• 设计交付： 直接生成可用于生产环境的 box-shadow 数值，不必再在开发者工具里反复试。

相关工具

• 颜色选择器 — 查找并转换理想的阴影颜色。
• CSS 渐变生成器 — 为阴影搭配自定义 CSS 渐变。
• 颜色对比度检查器 — 验证文字在所选背景上的可读性。