CSS Box Shadow 生成器
阴影图层
至少需要一个图层。
CSS 输出
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.25);相关外部工具
部分链接为联盟营销链接。
相关工具
可视化设计 CSS box-shadow，一键复制代码。拖动滑块设置偏移、模糊、扩展、颜色和不透明度，大尺寸实时预览即时更新。支持叠加多个阴影图层、将任意图层切换为内阴影，并可从现成预设快速开始。全程在浏览器中运行，无需上传任何数据。
使用方法
- 拖动水平偏移 X/Y、模糊和扩展滑块，同时观察实时预览的变化。
- 选择阴影颜色并调整不透明度。
- 添加更多图层以增加层次感，或将某图层切换为内阴影（inset）。
- 复制 box-shadow CSS，或切换到 Tailwind 标签获取任意值格式。
了解 box-shadow 各属性
CSS box-shadow 的语法为：偏移 X, 偏移 Y, 模糊, 扩展, 颜色，可选 inset 关键字。多个阴影之间用逗号分隔。
水平偏移 X & 垂直偏移 Y
偏移 X 控制阴影水平方向的位置，偏移 Y 控制垂直方向。正值向右/向下偏移，负值向左/向上偏移。
模糊半径
模糊使阴影边缘变得柔和。设为 0 时边缘清晰锐利，值越大阴影越柔和扩散。不能为负值。
扩展半径
扩展在应用模糊之前放大（正值）或缩小（负值）阴影范围。稍微负值的扩展适合制作贴近元素的细腻阴影。
Inset（内阴影）
inset 关键字将阴影绘制在元素内部而非外部，非常适合表现按下状态的按钮、输入框以及内凹效果。
颜色与不透明度
阴影通常使用半透明深色效果最自然，而不是纯黑色。降低不透明度可获得更真实的阴影效果。
功能特点
多层阴影叠加
可在同一元素上叠加多个阴影。将紧凑的深色阴影与较宽的柔和阴影组合，是打造真实立体感的关键技巧。
内阴影
将任意图层切换为内阴影，可实现按压、雕刻或凹陷效果，非常适合按钮和表单控件。
内置预设
从 Material 层叠高度、柔和/硬边阴影、Neumorphism 或彩色发光等预设开始，再按需微调。
浅色/深色背景预览
切换预览背景为浅色或深色，检查阴影在不同表面上的显示效果。
一键复制（CSS 或 Tailwind）
复制可直接粘贴的 box-shadow 声明，或获取 Tailwind 任意值格式 shadow-[…]，适用于工具类优先的项目。
常见使用场景
卡片与容器
为卡片添加柔和低透明度的阴影，让内容看起来有层次感并轻微浮起。
按钮与悬停状态
为按钮添加细微阴影，悬停时加大阴影，或使用内阴影模拟按下效果。
Neumorphism
在元素两侧分别添加亮色和暗色阴影，即可打造柔和的凸起 Neumorphism 风格。
发光效果与焦点环
使用偏移为零但有一定扩展值的彩色阴影，可创建发光效果或无障碍焦点高亮。
注意事项与技巧
- 大量大尺寸模糊阴影会影响渲染性能，在动画或滚动元素上请谨慎使用。
- 模糊值过大时绘制开销最高，建议通过叠加较小阴影来实现真实感。
- 保持足够的对比度，确保阴影效果不影响内容的可读性。
- 内阴影绘制在元素内部，不会超出其边框盒范围。
常见问题
- box-shadow 和 filter: drop-shadow 有什么区别？
- box-shadow 沿元素的矩形边框盒绘制（遵循 border-radius），而 drop-shadow 会沿元素的实际形状绘制，包括透明 PNG 和不规则形状。本工具生成的是 box-shadow。
- 可以为一个元素添加多个阴影吗？
- 可以。CSS 允许用逗号分隔多个阴影，本生成器同样支持叠加多个图层。组合阴影是实现真实立体感的关键。
- 什么是内阴影（inset shadow）？
- 内阴影绘制在元素内部而非外部，适合表现按下状态的按钮、输入框和凹陷表面。在任意图层上开启 Inset 选项即可。
- box-shadow 会拖慢页面速度吗？
- 少量静态阴影没有问题。大范围高模糊的阴影绘制开销较高，在频繁动画或重绘的元素上应谨慎使用。
- 我的数据会被上传吗？
- 不会。生成器完全在浏览器内运行，不向服务器发送任何数据，也无需注册账号。