一层一层地构建阴影
这个 box-shadow 生成器会为你写好 CSS <code>box-shadow</code> 属性。按需叠加任意多层阴影，分别调节每层的水平和垂直偏移、模糊、扩展、颜色和不透明度，切换为内阴影（inset），并在任意背景上实时查看预览框的变化。可以从柔和阴影、Material 风格的层级、新拟态（neumorphism）、硬边偏移和发光等预设开始，然后复制 CSS 或 Tailwind 的 <code>shadow-[…]</code> 类。粘贴现有阴影即可编辑。一切都在你的浏览器中运行。
如何创建 CSS box-shadow
- 1选择一个接近需求的预设，或保留默认的多层阴影。
- 2选中一层，设置 X 和 Y 偏移、模糊、扩展、颜色和不透明度。打开 Inset 可在框内绘制阴影。
- 3使用添加图层、复制、排序和隐藏图层来组合多个阴影。
- 4调整预览的背景、框的颜色、圆角半径和尺寸，使之与你的设计一致。
- 5复制 CSS 或 Tailwind 类。
box-shadow 各个值的含义
- X 和 Y 偏移
- 阴影向右和向下移动的距离。负值则向左和向上移动。光源位于页面上方时，Y 偏移为正值。
- 模糊半径
- 边缘的柔和程度。0 会得到框的清晰副本；数值越大，阴影铺得越宽、越淡。不能为负值。
- 扩展半径
- 在模糊之前放大或缩小阴影。负扩展配合大模糊可以防止柔和阴影从两侧露出，这正是大多数“柔和”阴影背后的技巧。
- 颜色
- 通常是低不透明度的黑色或背景的深色调。用背景色调给阴影着色，看起来比纯灰色更自然。
- inset
- 把阴影画在边框内侧而不是外侧，让框看起来是凹陷的。内阴影和外阴影可以写在同一条声明中。
为什么要叠加多层阴影？
真实的阴影在物体几乎接触表面的地方有一块深而集中的本影，外围则是柔和宽广的半影。单层 box-shadow 只能画出其中之一。叠加两到五层、偏移和模糊逐层翻倍、每层不透明度都很低的阴影，就能得到现代设计系统所用的平滑逼真的层次感。平滑多层预设正是这样做的。
图层从前往后绘制：列表中的第一层位于最上方。用箭头按钮调整顺序，用眼睛图标隐藏某一层，就能看出它起了什么作用。隐藏的图层不会出现在复制的 CSS 中。
层级、新拟态及其他风格
层级 1–5 预设沿用 Material Design 经典的卡片阴影：每个层级都把一个环境阴影和一个主阴影组合在一起，让卡片离页面越来越“高”。
新拟态在与背景同色的框上使用两个阴影：一个向右下偏移的深色阴影，一个向左上偏移的浅色阴影。只有框和背景颜色一致时才有效，所以预设会同时设置两者。硬边偏移完全去掉模糊，呈现扁平的粗野主义风格；发光使用零偏移和彩色阴影，适合焦点环和深色背景上的霓虹效果。
在 Tailwind CSS 中使用阴影
Tailwind 内置的 shadow-sm 到 shadow-2xl 已覆盖常见情况。其余情况下，生成器会写出任意值，例如 shadow-[0_10px_30px_-5px_rgba(0,0,0,0.15)]：由于类名不能包含空格，空格会被替换为下划线；这个类无需修改配置即可在 Tailwind 3 和 4 中使用。
阴影与性能
在当前所有浏览器中，大模糊半径都由 GPU 绘制，用在静态元素上开销很小。但给 box-shadow 加动画会让元素每一帧都重绘；如果要在悬停时为层次感添加动画，可以把较大的阴影放在伪元素上，改为对它的 opacity 做动画。
常见问题
- box-shadow 的语法是什么？
- box-shadow: [inset] offset-x offset-y [blur] [spread] color;。只有两个偏移值是必填的。多个阴影用逗号分隔，例如 box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.1);。
- 怎样做出柔和、低调的阴影？
- 使用低不透明度（10–20%）的黑色、较大的模糊、较小的 Y 偏移和负扩展，例如 0 10px 30px -5px rgba(0,0,0,0.15)。叠加两三层这样的阴影效果会更平滑。
- 怎样只在一侧加阴影？
- 把阴影向那一侧偏移，并使用与模糊大小相近的负扩展，使其不在其他边显示，例如只在底部显示的阴影：0 8px 6px -6px rgba(0,0,0,0.3)。
- inset 有什么作用？
- inset 把阴影画在框的内部而不是后面，让元素看起来像是嵌进页面里。常用于输入框和按下状态的按钮。
- box-shadow 和 drop-shadow 有什么区别？
- box-shadow 沿着元素的盒子和圆角绘制。filter: drop-shadow() 函数则沿着实际可见的像素绘制，例如透明 PNG 或 SVG 图标的轮廓，但它没有扩展值，也不支持 inset。
- 如何在 Tailwind 中使用自定义阴影？
- 从生成器复制 Tailwind 类，即 shadow-[0_4px_12px_rgba(0,0,0,0.15)] 这样的任意值，然后添加到元素上。也可以把 CSS 值写入主题的 boxShadow 配置，为它起个名字。
- 可以编辑已有的阴影吗？
- 可以。把 box-shadow 值、完整声明或 Tailwind 的 shadow-[…] 类粘贴到“导入”中。rem 和 em 长度按 16px 换算。
- 我的 CSS 会被发送到别处吗？
- 不会。生成器完全在你的浏览器中运行。