box-shadow:
    0px 4px 6px -1px rgba(0, 0, 0, 0.1);

免费在线 CSS 阴影生成器 — 可视化阴影构建器

通过实时预览功能，使用可视化工具设计精美的 CSS 箱阴影。此免费箱阴影生成器支持多层阴影、预设样式、内阴影，并可立即生成随时可用的 CSS 代码。

什么是箱阴影生成器？

箱阴影生成器是一种可视化工具，帮助网页设计师和开发人员创建 CSS box-shadow 值，而无需手动输入像素值。您无需猜测数字并刷新浏览器，而是通过调整滑块实时查看结果。

CSS 的 box-shadow 属性会在元素的框架周围添加阴影效果。它是现代网页界面中创建深度、高度和视觉层次结构时最常用的 CSS 属性之一。

如何使用此箱阴影生成器

1. 选择预设样式 — 从细微、中等或强烈阴影开始，或从头开始自定义。
2. 调整滑块 — 控制水平偏移、垂直偏移、模糊度、扩散度、颜色和透明度。
3. 切换内阴影 — 在外阴影和内阴影之间切换。
4. 添加多层阴影 — 栈叠多层阴影以实现复杂效果。
5. 自定义预览 — 更改背景色和箱体颜色以匹配您的设计。
6. 复制 CSS 代码 — 点击复制按钮，将代码粘贴到您的样式表中。

核心功能

功能	优势
实时预览	调整滑块时立即查看变化
6 种预设	快速使用常见阴影样式
多层支持	栈叠阴影以实现复杂、真实的效果
内阴影支持	为凹陷元素创建内阴影
颜色选择器	完全控制阴影颜色
透明度控制	精细调整阴影透明度
复制到剪贴板	一键导出 CSS 代码

理解 CSS 箱阴影

语法

box-shadow CSS 属性遵循以下语法：

box-shadow: [inset] offsetX offsetY blur spread color;

值	描述	示例
inset	（可选）创建内阴影	inset
offsetX	水平偏移 — 正值 = 右，负值 = 左	4px
offsetY	垂直偏移 — 正值 = 下，负值 = 上	4px
blur	模糊半径 — 值越大阴影越柔和	12px
spread	尺寸扩展 — 正值 = 更大，负值 = 更小	0px
color	带有透明度的阴影颜色	rgba(0,0,0,0.1)

多层阴影

通过逗号分隔多个阴影值可以实现多层效果：

box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.05);

这会创建两层阴影：一层紧贴元素的深色阴影，和一层更柔和、更远的浅色阴影，从而产生更真实的深度效果。

阴影样式对比

样式	CSS	使用场景
微弱	0 1px 3px rgba(0,0,0,0.08)	卡片、列表项
中等	0 4px 6px rgba(0,0,0,0.1)	按钮、模态框
强烈	0 10px 15px rgba(0,0,0,0.15)	对话框、弹出框
光晕	0 0 20px rgba(59,130,246,0.4)	聚焦状态、CTA 按钮
内阴影	inset 0 2px 4px rgba(0,0,0,0.1)	输入框、容器
硬阴影	4px 4px 0 rgba(0,0,0,0.25)	复古/极简主义 UI

实际应用场景

Material Design 阴影层级

Material Design 使用阴影表示层级。一级卡片使用 0 1px 3px rgba(0,0,0,0.12)，而四级对话框使用 0 12px 17px rgba(0,0,0,0.14)。

悬停效果

通过加深悬停时的阴影创建“抬升”效果：

.card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.15); }

聚焦状态

使用彩色光晕创建可访问的聚焦指示器：

input:focus { box-shadow: 0 0 0 3px rgba(59,130,246,0.5); }

新拟态设计

通过组合内阴影和外阴影（与背景颜色相同）创建柔和的立体效果。

提升阴影效果的技巧

技巧	说明
保持模糊度适度	过度模糊看起来不自然。大多数 UI 元素建议从 4–12px 开始。
使用低透明度	现实中的阴影并非完全不透明。5–15% 透明度最自然。
匹配背景颜色	在深色背景上，使用较亮的阴影颜色或彩色光晕代替黑色。
使用多层实现真实感	两层阴影（紧贴 + 柔和）比单层阴影更真实。
负扩散值	小的负扩散（-1 到 -2px）可防止阴影超出元素的角落。
避免对文本使用硬阴影	使用 text-shadow 的模糊效果，不要对文本使用硬偏移。

常见问题解答

box-shadow 和 drop-shadow 的区别是什么？

box-shadow 跟随元素的矩形框，而 filter: drop-shadow() 跟随内容的实际形状（包括透明区域）。对 PNG 图像或复杂形状使用 drop-shadow。

可以动画化 box-shadow 吗？

技术上可以，但动画 box-shadow 不够高效，因为它会触发重绘。为了实现平滑动画，可以使用两个堆叠元素并动画化阴影层的 opacity，或使用 filter: drop-shadow()。

box-shadow 在所有浏览器中都适用吗？

是的。box-shadow 的全球浏览器支持率超过 98%，包括所有现代浏览器。唯一例外是 IE8 及以下版本。

如何只在某一边创建阴影？

使用负扩散值与偏移组合。例如底部阴影：offsetX: 0, offsetY: 4px, blur: 6px, spread: -3px。负扩散值会从两侧拉近阴影。

可以使用多层阴影吗？

是的。使用“添加图层”按钮堆叠多层阴影。这对于在元素附近创建紧贴阴影和远处柔和阴影以实现真实深度非常有用。

这个工具在移动设备上可用吗？

是的。生成器完全响应式，适用于任何设备。所有计算都在您的浏览器中完成。