CSS box-shadow 生成器，免费
通过可视化方式创建漂亮的阴影，并复制 CSS。
预设
box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.25);
使用方法
- 拖动滑块来调整水平/垂直偏移、模糊、扩展和不透明度。
- 选择阴影颜色，需要时启用「inset」。
- 点击「添加阴影层」以叠加多重阴影。
- 使用预设作为快速起点。
- 点击「复制 CSS」将结果粘贴到您的样式表中。
常见问题
CSS 中的 box-shadow 是什么？
CSS box-shadow 属性为元素周围添加阴影效果。它接受水平偏移、垂直偏移、模糊半径、扩展半径和颜色等值。
可以添加多个阴影吗？
可以。点击「添加阴影层」来增加另一个阴影。CSS 输出中多个阴影用逗号分隔。这可用于创建复杂的叠加效果。
inset 关键字有什么作用？
添加「inset」会让阴影出现在元素内部而不是外部，形成内阴影或「凹陷」效果。
box-shadow 的五个参数
CSS box-shadow 为元素的边框盒添加一个或多个投影效果。语法为 box-shadow: <color>? <offset-x> <offset-y> <blur-radius>? <spread-radius>? inset?，多个阴影用逗号分隔。每个参数各司其职：
- offset-x：阴影的水平偏移距离。正值向右移动，负值向左移动。
0表示水平居中。 - offset-y：垂直偏移。正值向下移动（模拟顶部光源，是最常见的UI约定）。负值向上移动。
- blur-radius：阴影边缘淡化为透明的距离。通过高斯卷积实现；值越大，阴影越柔和、越大、越弥散。负值无效；
0产生硬朗锐利的边缘。 - spread-radius：在应用模糊之前增大（正值）或缩小（负值）阴影形状。正的spread在各个方向扩展阴影；负值收缩阴影，可将阴影限制在盒子一侧。
- color：默认为
currentcolor（元素自身的color值，有时会出人意料）。UI阴影几乎总是使用低alpha的黑色或近黑色，从rgba(0,0,0,0.05)到rgba(0,0,0,0.25)：实心黑色阴影看起来厚重且不自然。 - inset 关键字，将阴影绘制在盒子内部而非外部。用于按钮按下状态、内凹输入框「井」效果以及内部发光。
浏览器将阴影列表以从前到后的顺序合成：第一个阴影最靠近观察者，最后一个最远。这与 text-shadow 和 background 的排序方式相同，但与大多数CSS规则的层叠方式相反，这是新手常见的困惑点。
Material Design 的双重阴影层次系统
Google的Material Design（2014年5月推出；2021年推出Material Design 3）定义了一种量化的层次系统，UI表面位于几个密度无关像素级别之一。每个级别的阴影配方使用两层叠加阴影：
- 本影（主阴影），较小、较深，代表直接遮挡表面下方的光线。偏移短，模糊小。
- 半影（环境阴影），较大且更弥散，代表在房间内散射反弹的光线。偏移大，模糊大，alpha值更低。
在Material Design 2中，层次值从0dp（无阴影）到24dp；卡片通常静止时使用1-2dp，悬停时动态变为8dp，模态对话框使用24dp。Material Design 3将层次缩减为五个命名级别（1到5），并在暗色主题中除投影外还添加了色调叠加层。本影加半影的结构仍是视觉模型，这也是为什么Tailwind的 shadow-md 由两层叠加阴影组成：0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)。
拟态风格：需要两个对向阴影的设计趋势
拟态风格（由「新」与「仿真」合成的词）在2019年底至2020年初兴起，源于乌克兰设计师Alexander Plyuto于2019年12月在Dribbble上发布的名为「Skeuomorph Mobile Banking」的帖子，数周内收获了数万个点赞。其核心配方是两个颜色与父元素背景色相同的元素上的 box-shadow：右下方是较深的阴影，左上方是较浅的阴影。深色模拟表面向光源方向后退；浅色模拟表面朝光源方向凸起的高光面。反转偏移（或对两者都添加 inset）可产生内凹/按下的外观。
诚实的无障碍警告：拟态风格因其元素与背景之间的视觉对比必然非常低（它们共享颜色）而受到广泛批评。按钮和输入框可能无法满足WCAG 1.4.11（非文本对比度，AA，3:1 UI组件对相邻颜色的比率）。按下和未按下状态通常只能通过细微的阴影方向来区分，屏幕阅读器无法传达这一信息，对低视力、色盲或屏幕眩光用户也是不可见的。仅在装饰性表面上少量使用此样式，而非用于主要控件。
box-shadow 与 filter: drop-shadow() 的对比
CSS滤镜效果定义了一个替代方案，filter: drop-shadow(<x> <y> <blur> <color>)：外观视觉上相似，但有一个关键区别。box-shadow 投射的是边框盒矩形的阴影（如有 border-radius 则按其圆角）。drop-shadow 投射的是渲染元素（包括子元素）的alpha通道的阴影，包括透明PNG、带镂空的SVG形状、遮罩内容。选择 drop-shadow 最常见的原因是您要投影的元素不是矩形：透明PNG图标、SVG徽标、语音气泡三角形。
box-shadow | drop-shadow() | |
|---|---|---|
| Spread参数 | 是 | 否 |
| Inset变体 | 是 | 否 |
| 多重阴影 | 是（逗号分隔列表） | 是（链式滤镜） |
| 影响子元素 | 否 | 是（整个子树） |
| 裁剪 | 可延伸至 overflow:hidden 边界之外 | 限制在滤镜边界内 |
| 性能 | 对合成器友好 | 触发滤镜渲染通道 |
性能说明
box-shadow是渲染成本较高的CSS属性之一。成本有三个来源：模糊核大小（高斯模糊是可分离的两次卷积；模糊值翻倍，每像素工作量翻四倍，因此大卡片上100像素的模糊在滚动时会明显降低帧率）、阴影表面积（由spread扩展后再由模糊进一步放大的矩形是GPU需要光栅化的区域，大型模态叠加阴影是最耗性能的类型），以及重绘（对 box-shadow 进行动画处理会在每一帧触发阴影区域的重绘）。
实用建议：
- 对于悬停升降动画，优先对
transform: translateY()和opacity进行动画处理，而非box-shadow。这些是GPU加速的，不会触发绘制。 - 对于悬停阴影切换，在伪元素上声明两个阴影，将较大的那个设置为
opacity: 0，然后对伪元素的opacity进行动画处理。这样可以在不对模糊核本身进行动画处理的情况下切换阴影，Tobias Ahlin的「Shadow Tricks」（2017年）是经典的详细说明文章。 will-change: transform可提示浏览器将元素提升到自己的合成器层。请谨慎使用，提升过多元素会浪费GPU内存。- 避免在包含大量滚动内容的元素上使用box-shadow。每一帧滚动都必须重绘阴影。
无障碍性
从无障碍树的角度来看，阴影属于装饰性内容（屏幕阅读器会忽略它们），但它们有一定影响：
- WCAG 1.4.11 非文本对比度（AA，3:1）。如果卡片或按钮仅靠阴影与背景区分，那么阴影实际上定义了视觉边缘，而浅白色背景上淡淡的
rgba(0,0,0,0.05)阴影可能达不到3:1的阈值。许多设计系统同时使用阴影加1px实线边框来保证对比度。 - 焦点指示器。
box-shadow: 0 0 0 3px <color>是浏览器默认outline的现代替代方案，因为它遵循border-radius。焦点环必须满足WCAG 2.4.7 Focus Visible，最小宽度2个CSS像素，与未聚焦状态及相邻颜色的对比度至少达到3:1。 - forced-colors / Windows高对比度模式。在
forced-colors: active模式下，浏览器会忽略大多数CSS颜色，并用用户的系统调色板重新着色内容。box-shadow会被去除或简化；UI状态应始终有非阴影指示器（边框变化、颜色变化、图标、文字标签）来服务这些用户。 - 减少动画。设置了
prefers-reduced-motion: reduce的用户不应在悬停或滚动时看到大型阴影动画。请将动画过渡包裹在媒体查询中，对这些用户保持静止阴影。
快速配方
| 效果 | CSS |
|---|---|
| 细腻卡片悬浮 | 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) |
| 柔和现代卡片 | 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) |
| 重型模态浮起 | 0 25px 50px -12px rgba(0,0,0,0.25) |
| 锐利1px印章 | 0 0 0 1px rgba(0,0,0,0.05) |
| 焦点环（3px） | 0 0 0 3px rgba(59,130,246,0.5) |
| 内凹输入框「井」效果 | inset 0 2px 4px 0 rgba(0,0,0,0.06) |
| 光晕发光 | 0 0 20px 4px rgba(99,102,241,0.6) |
更多问题
为什么我的阴影被裁剪了？
几乎总是因为某个祖先元素设置了 overflow: hidden。阴影延伸到边框盒之外，但在祖先元素的边缘处被裁剪。两种解决方案：将阴影移到祖先元素本身，或使用不带overflow裁剪的包裹元素。filter: drop-shadow() 没有这个问题，但有自己的取舍。
我是否还需要使用 -webkit-box-shadow 之类的厂商前缀？
不需要。无前缀的 box-shadow 自2012年前后已获得全面支持。在2026年的代码中，厂商前缀是纯粹的噪音，应当去除。2010年代初期的CSS重置库通常防御性地包含了这些前缀；现代代码可以安全地删除它们。
如何对文字而非盒子应用阴影？
使用 text-shadow，它与box-shadow具有相同的偏移/模糊/颜色语法，但没有spread或inset。对于样式化文字上的字形形状阴影（例如 background-clip: text 渐变文字），对父元素使用 filter: drop-shadow() 才是正确的工具，box-shadow 会在字形后方投射矩形阴影。
为什么我的 0 0 0 2px 阴影看起来不柔和？
因为第三个值（模糊半径）是 0。没有模糊的纯spread阴影会产生锐利的实线轮廓，这正是焦点环和「伪轮廓」技巧所需要的，但不适合柔和的层次感。请添加一些模糊：0 0 4px 0 rgba(0,0,0,0.2)。
有任何内容会发送至服务器吗？
不会。预览在您拖动滑块时在浏览器中实时重新渲染；CSS字符串在本地生成；复制操作写入您的剪贴板。页面加载后即可离线使用。