CSS box-shadow 生成器：阴影效果在线制作
按钮悬停时的浮起、卡片的层次感、Modal 弹窗的纵深——这些视觉效果都靠 box-shadow。但手写阴影参数（6 个数值 + 颜色 + inset）容易写错，调一个满意的阴影要试十几次。用可视化生成器拖一拖，10 秒搞定。
box-shadow 语法详解
基础语法
box-shadow: x偏移 y偏移 模糊半径 扩展半径 颜色 inset;
6 个参数：
- x 偏移：水平偏移，正数向右，负数向左
- y 偏移：垂直偏移，正数向下，负数向上
- 模糊半径：0 是锐利边缘，越大越模糊（不能为负）
- 扩展半径：正值扩大阴影，负值缩小阴影
- 颜色：支持 hex、rgb、rgba、hsl
- inset：可选，内阴影（默认外阴影）
三个例子
/* 简单下投影 */
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
/* 悬浮卡片 */
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
/* 内凹效果 */
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
多层阴影
一个元素可以叠加多个阴影，用逗号分隔：
box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1);
多层阴影能做出更自然的纵深感（近处锐利 + 远处模糊）。
5 款 CSS 阴影生成器对比
1. 52tool.net CSS 阴影生成器（综合首选）
工具地址：CSS 阴影生成器
- 价格：免费
- 功能：外阴影、内阴影、多层阴影
- 特点：可视化拖拽，实时预览，复制 CSS
- 预设：20+ 常用阴影模板（卡片、按钮、浮窗、新拟态）
- 导出：CSS、Tailwind 类
2. 52tool.net CSS 渐变生成器
工具地址：CSS 渐变生成器
- 配合使用：渐变背景 + 阴影 = 立体按钮
3. 52tool.net CSS 圆角生成器
工具地址：CSS 圆角生成器
- 配合使用：圆角 + 阴影 = 现代卡片
4. Shadowlord
- 价格：免费
- 特点：界面直观，多层阴影编辑强
- 优势：色板丰富
5. CSS Scan
- 价格：付费 $19
- 特点：能"复制"任何网站的阴影
- 优势：从优秀设计学阴影
实战教程：卡片悬浮阴影
场景
设计一个产品卡片，需要柔和的悬浮阴影。
步骤 1：打开工具
进入 52tool CSS 阴影生成器。
步骤 2：设置参数
- x 偏移：0（正下方投影）
- y 偏移：4px（向下偏移）
- 模糊半径：12px（柔和模糊）
- 扩展半径：0
- 颜色：rgba(0,0,0,0.15)（半透明黑）
- inset：不勾选
步骤 3：预览效果
实时看到卡片悬浮效果。微调：
- 想更柔和：模糊 20px
- 想更深：颜色 rgba(0,0,0,0.25)
- 想偏移：x 2px、y 6px（光从左上来）
步骤 4：复制代码
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
步骤 5：加悬停动画
.card {
transition: box-shadow 0.3s, transform 0.3s;
}
.card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
transform: translateY(-2px);
}
鼠标悬停时阴影变大、卡片上浮 2px，有"被拿起"的感觉。
实战教程：多层自然阴影
场景
重要 Modal 弹窗，需要明显但有层次的阴影。
问题
单层阴影要么太锐利（模糊小），要么太散（模糊大）。多层叠加才自然。
步骤 1：第一层（近处锐利）
- x: 0, y: 2px, blur: 4px, color: rgba(0,0,0,0.1)
模拟近处物体的硬阴影。
步骤 2：第二层（远处模糊）
- x: 0, y: 8px, blur: 24px, color: rgba(0,0,0,0.15)
模拟远处扩散的软阴影。
步骤 3：组合
.modal {
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 8px 24px rgba(0,0,0,0.15);
}
效果：边缘有明确阴影，整体又柔和扩散，像真实物体投射。
实战教程：新拟态风格（Neumorphism）
场景
2020 年流行的新拟态风格，元素像从背景"挤出"或"压入"。
关键
背景色和元素同色，用一明一暗两个阴影制造立体感。
步骤 1：背景和元素同色
body { background: #e0e5ec; }
.card { background: #e0e5ec; }
步骤 2：双向阴影
- 左上亮阴影：x -4px, y -4px, blur 8px, color rgba(255,255,255,0.8)
- 右下暗阴影：x 4px, y 4px, blur 8px, color rgba(0,0,0,0.15)
步骤 3：组合
.neumorphic {
background: #e0e5ec;
box-shadow:
-4px -4px 8px rgba(255,255,255,0.8),
4px 4px 8px rgba(0,0,0,0.15);
border-radius: 16px;
}
效果：卡片像从背景"凸出"，柔和立体。
步骤 4：按下效果
.neumorphic:active {
box-shadow:
inset -4px -4px 8px rgba(255,255,255,0.8),
inset 4px 4px 8px rgba(0,0,0,0.15);
}
按下时阴影变 inset，像被"压入"背景。
实战教程：彩色发光效果
场景
CTA 按钮要发光，吸引点击。
步骤 1：按钮基础
.cta {
background: #2563eb;
color: white;
border: none;
padding: 12px 32px;
border-radius: 8px;
}
步骤 2：同色发光阴影
.cta {
box-shadow: 0 0 20px rgba(37, 99, 235, 0.5);
}
x、y 都是 0，只有模糊和颜色，阴影从四周扩散，像发光。
步骤 3：悬停增强
.cta:hover {
box-shadow: 0 0 30px rgba(37, 99, 235, 0.7);
}
实战教程：玻璃拟态阴影
场景
2026 年流行的 Glassmorphism 玻璃拟态效果。
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
关键三要素：半透明背景 + backdrop-filter 模糊 + 柔和阴影。
阴影设计原则
1. 光源统一
整个页面的阴影要模拟同一个光源。通常光源在左上角 45 度：
- 所有阴影向右下偏移（x 正、y 正）
- 不要有的元素阴影向左、有的向右，看起来光源混乱
2. 层次对应
- 卡片：阴影小（y 2-4px）
- 悬浮卡片：阴影中（y 4-8px）
- Modal/Drawer：阴影大（y 8-24px）
- 全屏遮罩中的元素：阴影最大
层次越靠上，阴影越大越模糊。
3. 颜色不用纯黑
rgba(0,0,0,0.x) 是默认，但纯黑阴影偏硬。尝试：
rgba(30, 41, 59, 0.15)（深蓝灰，更柔和）rgba(15, 23, 42, 0.1)（接近黑但带蓝调）
彩色阴影用主色的低透明度版本，更和谐：
- 蓝色按钮：
rgba(37, 99, 235, 0.3) - 绿色卡片：
rgba(22, 163, 74, 0.2)
4. 避免阴影过重
阴影太深像 90 年代立体按钮。现代设计阴影偏淡（透明度 0.05-0.2），靠层次和模糊半径制造空间感。
5. 性能注意
box-shadow 是 GPU 加速的，性能好。但大面积元素 + 多层阴影 + 动画可能卡顿。复杂场景用 will-change: box-shadow 提示浏览器优化。
常见问题解答
Q: box-shadow 不显示怎么办？
A: 排查四点：1) 元素有没有 overflow: hidden（会裁剪外阴影）；2) 父元素 overflow: hidden 同样会裁剪；3) 颜色透明度是不是 0；4) z-index 是不是被其他元素盖住。最常见是父元素 overflow 裁剪了。
Q: 阴影在 Safari 显示不一样？
A: 旧版 Safari 对 box-shadow 渲染略有差异。加 -webkit-box-shadow 前缀兼容旧版。2026 年的 Safari 都支持标准语法，前缀一般不需要。
Q: 怎么做长投影（Long Shadow）？
A: 长投影是多层同方向阴影叠加，每层偏移递增：
.long-shadow {
box-shadow:
1px 1px 0 rgba(0,0,0,0.1),
2px 2px 0 rgba(0,0,0,0.1),
3px 3px 0 rgba(0,0,0,0.1),
/* ... 一直到 20px */;
}
用 52tool 阴影生成器 一键生成长投影，不用手写。
Q: box-shadow 和 filter: drop-shadow 有什么区别？
A: box-shadow 按元素的盒子（矩形）投影，不规则形状（如透明 PNG）会按矩形投。filter: drop-shadow() 按元素的可见像素投影，适合不规则形状。但 drop-shadow 性能差，能用 box-shadow 就别用 drop-shadow。
Q: 怎么让阴影只在底部？
A: 用负的扩展半径收缩阴影顶部：
box-shadow: 0 4px 8px -2px rgba(0,0,0,0.1);
扩展半径 -2px 把阴影向内收缩，配合 y 4px，阴影只在元素下方。
Q: Tailwind 怎么自定义阴影？
A: Tailwind 内置 shadow-sm/md/lg/xl/2xl，不够用就任意值：
<div class="shadow-[0_4px_12px_rgba(0,0,0,0.15)]"></div>
或者 tailwind.config.js 里扩展 boxShadow 主题。
总结
CSS box-shadow 是制造层次感的核心属性。52tool.net 阴影生成器免费、可视化、支持多层，覆盖外阴影、内阴影、新拟态、玻璃拟态所有效果。
记住四条：
- 光源统一：所有阴影向同一方向偏移
- 层次对应：越靠上的元素阴影越大
- 颜色不用纯黑：用半透明深色或主色变体
- 多层叠加：近处锐利 + 远处模糊，阴影才自然
