CSS 阴影生成器

CSS box-shadow 生成器是什么？

box-shadow 是一个 CSS 属性，可以给任何元素加上投影、发光和内凹效果。要让扁平的设计有“高度”感，它是最有效的手段：卡片从页面上浮起，弹窗悬浮在内容之上，按钮看起来可以按下去。

诀窍在于，好看的阴影很少只有一层。现实中的阴影更柔和，还有环境光的反射，所以大多数设计系统（Material、iOS、Tailwind）都会叠加 2 至 3 条偏移和不透明度各不相同的 box-shadow 声明。手写这些很麻烦；用生成器，你可以直观地调整每一层，并实时看到叠加后的效果。

Coddy 的生成器支持任意多层阴影，同时支持外阴影和内阴影，每层都可以单独设置颜色和不透明度，还提供涵盖最常见效果的预设：轻柔卡片、锐利投影、品牌发光、内凹效果和新拟态表面。复制 CSS 后直接粘贴到样式表里即可，无需上传，无需账号，也没有水印。

关于 CSS box-shadow 你需要知道的

• 语法是 box-shadow: [inset] <x> <y> <blur> <spread> <color>。inset 让阴影出现在元素内部；不加它，阴影就落在元素外部。
• 模糊半径让边缘变柔和，数值越大，阴影越弥散。扩展半径在应用模糊之前放大或缩小阴影（负值会把阴影向内收，适合做柔和的内部抬升效果）。
• 多个阴影用逗号分隔，按书写顺序从后往前叠放：在最终合成效果中，先写的阴影位于后写阴影的下方。
• 颜色使用 rgba()（或 hsla()），这样每层的不透明度都可以单独调整。低不透明度的纯黑看起来是柔和的灰色阴影；完全不透明的纯黑则像生硬的剪影。
• box-shadow 由 GPU 合成，是成本最低的视觉提升手段之一。它不影响布局，元素会保持原来的大小和位置。

如何设计一个 box-shadow

1. 1

   从预设开始

   选择一个符合你想要的感觉的预设：轻柔卡片、柔和浮起、锐利投影、品牌发光、内凹效果或新拟态。这些预设都是很好的起点，你可以继续微调。

2. 2

   调整当前图层

   拖动 X/Y 偏移、模糊、扩展、颜色和不透明度的滑块。左侧的预览会实时更新。不透明度越低、模糊越大，阴影看起来越柔和。

3. 3

   叠加更多图层

   点击“添加图层”叠加第二层阴影。现实中的层次感几乎总是用两层来实现：一层短而紧（接触阴影），一层长而柔（环境阴影）。

4. 4

   打开内阴影制作内凹效果

   打开“内阴影”后，阴影会画在元素内部，而不是四周。再配合一层轻微的外阴影，就能做出按钮被按下的效果。

5. 5

   复制 CSS

   当预览和你的设计一致时，点击“复制 CSS”。把结果粘贴到样式表中，生成的规则包含所有启用的图层。

box-shadow 速查表

box-shadow: x y blur spread color 中每个值的含义和作用。

可以试试的 box-shadow 示例

box-shadow:    0 1px 2px rgba(0, 0, 0, 0.06),    0 4px 12px rgba(0, 0, 0, 0.08);

box-shadow: 0 0 24px 4px rgba(108, 140, 255, 0.45);

box-shadow:    inset 0 2px 6px rgba(0, 0, 0, 0.18),    inset 0 0 0 1px rgba(0, 0, 0, 0.06);

box-shadow 的常见错误

• 使用高不透明度的纯黑。它看起来像生硬的剪影，而不是阴影。把不透明度降到 0.06 至 0.18，浮起效果才自然。
• 忘了设置 Y 偏移。X=0、Y=0 的阴影会均匀地落在元素后面，做发光效果没问题，但对于应该看起来悬浮着的卡片就不对了。
• 叠加太多层。通常三层就足够了；十层只会得到一团模糊浑浊的效果，还会带来明显的绘制开销。
• 把 filter: drop-shadow() 和 box-shadow 混用。drop-shadow() 会沿着 SVG 或图片的 alpha 遮罩生成阴影，适合不规则形状；而对于矩形元素，box-shadow 更快、更干净。
• 忘了 box-shadow 不受元素自身的 overflow: hidden 影响。如果父元素设置了 overflow: hidden，阴影会被裁掉。

CSS box-shadow 常见问题