CSS 阴影生成器

功能简介

CSS 阴影生成器让你直观地调出阴影，再复制最终的 box-shadow 声明。可以叠加任意多层阴影，为每一层设置偏移、模糊、扩展、颜色和不透明度，或切换成内阴影，预览会立即更新。也可以粘贴已有的 box-shadow 值，用可视化方式继续编辑。所有操作都在浏览器里完成。

使用方法

1. 从某个预设开始，或者沿用示例阴影。
2. 用「图层」按钮选择要编辑的图层，或者点「添加图层」再叠加一层。
3. 拖动「水平偏移」「垂直偏移」「模糊」「扩展」，选择「颜色」，调低「不透明度」让阴影更柔和。打开「内阴影」得到内部阴影。
4. 调整预览的「方块颜色」「背景」和「圆角」，让它和你的页面一致。这些只影响预览。
5. 从「CSS」卡片复制代码。

底部的「阴影 CSS」框可以编辑：把样式表或设计工具里的阴影粘贴进去，上方的控件会自动读取。rem 和 em 单位按 16px 换算成 px。

示例

.card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 12px 24px -6px rgb(30 64 175 / 0.25);
}

让阴影更自然的技巧

• 不透明度要低。 5%–25% 的黑色看起来真实；纯深色阴影显得沉重。
• 负的扩展值 可以防止大模糊从两侧溢出，大多数「卡片」阴影都用这个技巧。
• 给阴影加点颜色。 带一点背景色或品牌色的阴影比纯灰色更有质感。
• 光源方向一致。 每一层的垂直偏移都保持为正，所有阴影就会认同同一个光源方向。
• 注意性能。 大量元素上的大模糊会让低端手机滚动变卡；做动画时改变透明度或 transform，而不是阴影本身。