CSS 阴影生成器 — 多层阴影、新拟态和文字阴影
实时预览设计多层 box-shadow 和 text-shadow 效果，提供层级、新拟态和发光预设，一键复制 CSS。
box-shadow: 0 10px 30px -6px rgba(15, 23, 42, 0.18), 0 4px 10px -4px rgba(15, 23, 42, 0.1);
shadow-[0_10px_30px_-6px_rgba(15,23,42,0.18),0_4px_10px_-4px_rgba(15,23,42,0.1)]
完全在你的浏览器中运行。你输入的任何内容都不会发送给我们，也不会被保存。 浏览全部免费工具.
发现问题，或者觉得哪里可以更好？每条消息我们都会阅读，并尽快修复。
这款免费的 CSS 阴影生成器让你凭肉眼设计阴影，并复制精确的 box-shadow 或 text-shadow CSS。可以叠加任意多层，每层都有独立的水平和垂直偏移、模糊、扩展、颜色、不透明度和内阴影设置，并在预览卡片上实时查看效果；卡片的背景、颜色和圆角都可以改成与你的设计一致。
真实感的阴影几乎从来不是单层的。一层清晰、贴近的阴影加上一层大而淡的阴影，看起来就像物体从页面上浮起，Material Design 的层级（elevation）正是这样实现的；而新拟态需要在与背景同色的卡片上加两道方向相反的阴影。预设覆盖了这些模式，下方的说明则解释了 box-shadow 语法、为什么多层效果更好，以及阴影对渲染性能的影响。
使用方法
- 选择“盒子阴影”或“文字阴影”。
- 从预设开始，或用滑块调整所选图层：偏移、模糊、扩展、颜色、不透明度和内阴影。
- 点击“+ 添加图层”添加更多图层（会复制当前所选图层），在列表中选中图层进行编辑，用箭头调整顺序。第一个图层绘制在最上面。
- 让预览与你的设计一致：设置页面背景、卡片颜色和圆角。
- 复制 CSS，或复制 Tailwind 任意值类名。
常见问题
box-shadow 的各个值是什么意思？
box-shadow: inset? x偏移 y偏移 模糊 扩展 颜色。x 偏移让阴影向右移动（负值向左），y 偏移让阴影向下移动（负值向上）。模糊决定边缘的柔和程度；0 为硬边。扩展会在模糊前放大阴影（负值则缩小，这样大的模糊就不会从两侧露出来）。inset 把阴影画在元素内部而不是外部。多个阴影用逗号分隔，第一个绘制在最上层。
如何做出柔和、逼真的阴影？
用两层或更多低不透明度的阴影，而不是一层深色阴影：一层小而紧的阴影表现接触边缘（0 1px 2px，约 10% 的黑色），再加一层更大、更柔和的阴影表现环境光（0 8px 24px，8% 到 12%）。给大阴影设一个略为负值的扩展，让它保持在元素下方。在彩色页面上，用背景色的深色版本而不是纯黑来给阴影着色，看起来也会更自然。
如何制作新拟态效果？
让元素的背景色与父元素相同，然后添加两道阴影：一道较深的向右下偏移，一道较浅的（通常是白色）向左上偏移，例如在 #e0e5ec 上使用 9px 9px 16px rgba(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.5)。改为 inset 即可表现按下状态。用于控件时要谨慎：新拟态按钮与背景的对比度很低，除非加上边框或更明显的轮廓，否则通常达不到 WCAG 对界面组件 3:1 对比度的要求。
box-shadow 和 filter: drop-shadow() 有什么区别？
box-shadow 沿着元素的矩形盒子（包括 border-radius）绘制，支持扩展和内阴影。filter: drop-shadow() 沿着可见像素绘制，因此能勾勒出透明 PNG、SVG 图标或裁剪形状的轮廓，但不支持扩展和内阴影，每个函数也只能有一个阴影。卡片和按钮用 box-shadow，不规则图片和图标用 drop-shadow。
text-shadow 可以设置扩展或内阴影吗？
不可以。text-shadow 只接受 x 偏移、y 偏移、模糊和颜色。要模拟描边，可以叠加四个或更多向各个方向偏移 1px 的硬阴影（即“描边”预设），或者使用现已广泛支持的 -webkit-text-stroke。柔和、低不透明度的文字阴影可以提高照片上白色文字的可读性，但它不计入 WCAG 对比度。
阴影会影响性能吗？
静态阴影的开销很小。但如果每一帧都要重绘，较大的模糊半径就会变得昂贵，比如在许多卡片上对 box-shadow 做悬停动画时。常用的技巧是把阴影放在伪元素上，改为对它的不透明度做动画，这样浏览器就可以在 GPU 上合成，而不必重绘模糊。
层级：一致的阴影等级
设计系统会定义几个层级，并且只使用这几个，这样元素“有多高”才有意义：卡片在第 1 级，下拉菜单在第 2 或 3 级，对话框在第 4 或 5 级。这里的层级预设遵循同样的模式，每级都把一层紧贴的阴影和一层更宽的阴影搭配起来，两者都随高度增长。
• 第 1 级，静止的卡片和列表项：0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)。
• 第 2 级，凸起的卡片和悬停项：0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12)。
• 第 3 级，下拉菜单和弹出框：0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.1)。
• 第 4 和第 5 级，模态框和对话框：更大的偏移和模糊，不透明度仍低于 20%。
把各个层级存为 CSS 自定义属性（--shadow-1 到 --shadow-5）或放进 Tailwind 主题，而不是把数值直接粘贴到组件里，这样整套等级就能在一处统一调整。
深色模式下的阴影
近乎黑色的背景上，黑色阴影是看不见的，所以深色界面用不同的方式表现层级：越高的表面背景色越浅一些；如果保留阴影，则让阴影更大、更不透明。一条细微的 1px 浅色边框或内部高光（inset 0 1px 0 rgba(255,255,255,0.06)）往往比任何外阴影效果都好。发光效果（如“发光”预设）在深色背景上有效，因为它是增加光而不是减少光；请把它留给焦点状态和重点强调，而不是每张卡片都用。