盒阴影生成器
盒阴影生成器（box-shadow 生成器），是指在线可视化调节阴影的水平偏移、垂直偏移、模糊半径、扩展半径与颜色，实时预览并一键复制 CSS box-shadow 代码的前端工具。它免费、无需注册，支持多层阴影叠加、内阴影 inset、预设阴影库与粘贴代码反解析。本工具的预览区直接渲染最终 box-shadow，所见即所得，不做二次转换。阴影参数全在浏览器本地计算，内容不上传。
阴影约向上溢出 2px、向下 10px、向左 6px、向右 6px（按 偏移 + spread + 模糊半径 / 2 估算，各引擎的高斯模糊是近似实现，实测可能差 1~2px）。 父容器若写了 overflow: hidden，超出这个范围的阴影就会被裁掉。
列表越靠前的层画得越靠上：CSS 的多层阴影 CSS 写法是「先声明的盖在上面」，和「后写的盖住先写的」这种直觉相反。
预设库更新于 2026-08；Tailwind 组对照的是 v3.4 默认主题。
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));🔒 阴影参数的生成与解析全部在你的浏览器本地完成，内容不上传、不外发。预览区直接渲染最终 box-shadow， 和你复制走的是同一串代码。默认颜色为 rgba(0, 0, 0, 0.15)。
如何使用盒阴影生成器
拖动滑杆调节水平偏移、垂直偏移、阴影模糊半径与扩展半径 spread，再用取色器或手输 rgba 设置阴影颜色，预览区实时跟着变。
需要更立体的效果就点「添加阴影层」叠加多层阴影，或勾选「内阴影 inset」把阴影画到元素内部；也可以直接点 Tailwind、Material 预设或拟物阴影生成载入后再微调。
在底部切换纯 CSS、带前缀、Tailwind、仅片段四种导出格式，点「复制代码」把生成的 CSS box-shadow 代码粘进你的项目。
关于盒阴影生成器的常见问题
- 盒阴影生成器会上传数据吗？安全吗？
- 不会上传。盒阴影生成器的参数调节、代码生成与粘贴反解析全部在你的浏览器本地完成，阴影参数与颜色不会发送到服务器，预览区用的就是生成的同一串 CSS，关闭页面即清除。（站点自身仅有匿名访问量统计，与你编辑的阴影内容无关。）
- 手机上能用盒阴影生成器吗？需要装软件吗？
- 可以，且不用下载任何 App 或插件。盒阴影生成器是纯网页实现，手机、平板、电脑浏览器打开即用，滑杆、取色器、图层上移下移按钮都是原生控件，触屏可以直接操作。数值输入框保留了草稿态，手机上逐字符重输不会被吃掉字符，调完点复制就能把代码粘到你的编辑器里。
- box-shadow 的四个数值分别代表什么意思？
- box-shadow 参数含义按顺序是：水平偏移（正值向右）、垂直偏移（正值向下）、阴影模糊半径（越大越柔和，不能为负）、扩展半径 spread（正值让阴影整体变大、负值收缩）。只写两个数值时后两个按 0 处理，颜色写在最后，省略时浏览器按 currentColor 处理。
- 盒阴影生成器支持内阴影 inset 吗？
- 支持。勾选图层上的「内阴影 inset」，阴影就会画到元素内部而不是外面，输出的代码会在这一层最前面加上 inset 关键字。内阴影 inset 常用来做输入框的凹陷感、按钮按下态和进度条内槽；同一个元素里内阴影和外阴影可以混着叠加。
- box-shadow 怎么加多层阴影？顺序是怎么排的？
- 多层阴影 CSS 的写法是用逗号把每层串起来，本工具点「添加阴影层」即可，最多 8 层。顺序要特别注意：逗号列表里先声明的那层画在最上面，越靠后越靠下，和「后写的盖住先写的」这种直觉相反。真实设计系统的层级阴影几乎都是两三层叠出来的，可以点 Material 预设看现成例子。
- box-shadow 怎么写才自然不发灰？
- 关键在颜色不在模糊。box-shadow 怎么写才自然，经验是用低透明度的纯黑（浅底上 rgba 的 alpha 取 0.1 到 0.2），或者取底色的同色系深色，别用不透明的中灰——灰色会在底色上糊一层脏色。另外模糊半径越大透明度就要越低：12px 模糊配 0.15 上下，40px 模糊得降到 0.08 左右，否则阴影会糊成一团。页面上的深色底与棋盘格背景就是用来验这一点的。
- 盒阴影生成器能导出 rem 单位的阴影吗？
- 能。导出区的「单位」下拉可以切到 rem 或 em，并单独设置换算基准（默认 16px）。阴影 rem 单位换算就是一次除法：16px 基准下 4px 写成 0.25rem、12px 写成 0.75rem，工具会把四个数值一起换算，视觉效果不变。只换单位不换数值会直接改变阴影大小，所以这一步不要手改；项目改过根字号的话，把换算基准调成实际值再导出。
- hover 阴影动画会影响页面性能吗？
- 静态阴影不用担心，开销在动画上。box-shadow 性能开销主要来自模糊，模糊半径越大每帧要重绘的像素越多，把它直接写进 transition 会让浏览器逐帧重算模糊，长列表上容易掉帧。更稳的 hover 阴影效果写法是把目标阴影放到 ::after 伪元素上、初始 opacity 为 0，hover 时只过渡透明度。本工具只生成阴影声明本身，过渡与伪元素要在你的项目里补。
- 生成的 box-shadow 代码需要加浏览器前缀吗？
- 基本不需要。box-shadow 从 IE9 起就是标准属性，现代主流浏览器全部原生支持，直接用无前缀写法即可。本工具的「带前缀」标签只是额外给出一条 -webkit-box-shadow 声明，供需要兼容极旧内核的场景使用，正常项目加了反而是冗余代码。
- 为什么我写的 box-shadow 不显示或被裁掉了？
- box-shadow 不显示常见有三种原因：一是偏移、模糊、扩展都是 0 且颜色不透明，阴影正好被元素自身盖住；二是颜色透明度为 0；三是父容器写了 overflow: hidden，超出盒子的那部分阴影被裁掉了。本工具会实时算出阴影约向四个方向溢出多少像素，照着给父容器留出空间就能解决。
- box-shadow 和 filter: drop-shadow 有什么区别？
- box-shadow 描的是元素的盒子（含 border-radius），filter: drop-shadow 描的是元素实际不透明像素的轮廓，所以给透明背景的 PNG 或不规则 SVG 加阴影要用后者。另外 drop-shadow 没有扩展半径 spread、也没有内阴影 inset。本工具在单层、非 inset 且 spread 为 0 时会给出等价写法，其余情况会说明为什么不能等价转换。
- 盒阴影生成器能导出 Tailwind 阴影代码吗？
- 能。切到「Tailwind」标签就会得到 shadow-[…] 形式的任意值类名，值里的空格已按 Tailwind v3.4 的任意值语法转义成下划线，可以直接粘进 className 使用，不用再手动改写。如果只想用官方档位，页面下方还有一张 Tailwind 阴影代码对照表，数值全部取自官方默认主题，点一下就能载入编辑器继续微调。
box-shadow 参数含义速查表
box-shadow 的完整语法是「inset? 偏移X 偏移Y 模糊 扩展 颜色」，六个位置的含义见下表，顺序固定、不能调换。这件事在中文里还有好几种叫法：盒阴影生成器、CSS 阴影生成器、在线阴影生成工具，正文里说的盒子阴影 CSS、框阴影、投影，指的都是同一个 CSS 属性 box-shadow，产出的就是一段 CSS 阴影代码。英文站点上的 box shadow generator、CSS box shadow generator、box shadow css 说的也是它。要注意两个容易混的英文词：drop shadow 通常指 filter: drop-shadow()，描的是不透明像素的轮廓而不是盒子（区别见本页最后一节）；neumorphism 阴影（新拟态）则特指本页「拟物阴影生成」那种同色系一亮一暗的双层写法，不是另一个 CSS 属性。搜这些词落到的都是同一件事：把盒子阴影 CSS 的四个数值和颜色调出来，再复制走。
| 参数 | 含义 | 常见取值 |
|---|---|---|
| 偏移 X | 水平偏移，正值把阴影推向右边、负值推向左边 | 0 到 8px；卡片阴影一般写 0 |
| 偏移 Y | 垂直偏移，正值把阴影推向下方，模拟顶部光源 | 2px 到 24px |
| 阴影模糊半径 | 过渡带的宽度，越大越柔和；CSS 规范不允许负值 | 4px 到 40px |
| 扩展半径 spread | 整体放大或缩小阴影，负值让阴影收缩、只在下方露一条 | -12px 到 8px |
| 颜色 | 支持 HEX 与 rgba；用低透明度的黑比用灰色自然得多 | rgba(0, 0, 0, 0.1) 前后 |
| inset | 写在最前面，把阴影画到元素内部（内阴影 inset） | 输入框凹陷、按钮按下态 |
Tailwind 阴影代码对照表：官方默认档位
下表数值取自 Tailwind CSS v3.4 的默认主题，由本站的预设数据表现算渲染，点页面上方对应按钮即可载入继续微调。
| 类名 | box-shadow 值 | 层数 |
|---|---|---|
shadow-sm | 0 1px 2px 0 rgba(0, 0, 0, 0.05) | 单层 |
shadow | 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) | 2 层叠加 |
shadow-md | 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) | 2 层叠加 |
shadow-lg | 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) | 2 层叠加 |
shadow-xl | 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) | 2 层叠加 |
shadow-2xl | 0 25px 50px -12px rgba(0, 0, 0, 0.25) | 单层 |
shadow-inner | inset 0 2px 4px 0 rgba(0, 0, 0, 0.05) | 单层内阴影 |
Material 阴影代码每一级都是三层叠加——本影、半影、环境光各一层，例如 elevation 1 就是 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12)，这是多层阴影最典型的用法。
卡片阴影 CSS、按钮阴影 CSS 与内阴影怎么挑参数
| 场景 | 取值思路 | 起手参数 |
|---|---|---|
| 卡片阴影 CSS | 偏移 X 归 0、垂直偏移小、模糊大，做出柔和的漂浮感 | 0 4px 12px rgba(0, 0, 0, 0.15) |
| 按钮阴影 CSS | 静态时浅、悬停时加大偏移与模糊，做出抬起效果 | 0 2px 6px rgba(0, 0, 0, 0.16) |
| 输入框内阴影 inset | 加 inset、偏移向下、模糊小，做出内凹的槽感 | inset 0 2px 4px rgba(0, 0, 0, 0.08) |
| 拟物阴影生成 | 和底色同色系的一亮一暗两层，方向相反 | 页面上填底色后点「生成拟物阴影」现算 |
| 发光描边 | 偏移与模糊都为 0、只留扩展半径，等价于一圈实色边 | 0 0 0 3px rgba(59, 130, 246, 0.5) |
CSS 阴影怎么调才自然：颜色与透明度的取法
CSS 阴影怎么调才自然，决定性的不是模糊半径而是颜色：现实里没有灰色的影子，只有被遮暗的底色，所以阴影要么用低透明度的纯黑叠上去，要么取底色的同色系深色，唯独不要用不透明的中灰。本页上方的编辑器本身就是一个 box-shadow 在线预览器，浅色底、深色底、棋盘格三种背景可以随时互切——同一串 CSS 阴影代码在浅底上顺眼、换到深底上就发白发脏，多半就是颜色选错了。
| 颜色写法 | 实际观感 | 适用场景 |
|---|---|---|
| 不透明中灰 #999 | 在任何底色上都糊一层脏色，深色底上尤其明显，看起来像脱离了背景 | 不建议 |
| 低透明度纯黑 rgba(0, 0, 0, 0.1~0.2) | 透过阴影看到的仍是底色本身，只是被压暗，浅底上最稳的默认解 | 卡片、按钮、弹层 |
| 底色同色系深色 | 像被环境光染过，蓝底配深蓝阴影比配黑色更贴 | 有明确主色的界面、拟物阴影生成 |
透明度的经验值和模糊半径成反比：模糊 12px 左右配 alpha 0.15 上下，模糊拉到 40px 就要降到 0.08 附近，否则大面积的半透明黑会把整块区域拖灰。多层阴影则反过来——每层各取 0.1 到 0.2 的低透明度叠加，层次比单层写一个 0.3 自然得多，Material 组预设的三层正是 0.2 / 0.14 / 0.12 这样递减的。
box-shadow、text-shadow 与 filter: drop-shadow 的区别
| 写法 | 作用对象 | 支持的参数 |
|---|---|---|
| box-shadow | 元素的盒子，跟随 border-radius | 偏移、模糊、扩展 spread、内阴影 inset、多层 |
| text-shadow | 文字字形 | 偏移、模糊、颜色；没有扩展、没有 inset |
| filter: drop-shadow() | 元素实际不透明像素的轮廓 | 偏移、模糊、颜色；没有扩展、没有 inset |
透明背景的 PNG、不规则 SVG 图标要贴合轮廓投影时用 drop-shadow；普通的卡片、按钮、输入框一律用 box-shadow。本工具只做 box-shadow，不把 text-shadow 硬合并进来（语法不同，合并只会误导）。
box-shadow 性能开销与 hover 阴影动画怎么写
box-shadow 性能的开销集中在模糊上：模糊半径越大，浏览器每帧要重绘的像素越多。静态阴影只算一次，再大也无所谓；真正会掉帧的是把 box-shadow 直接写进 transition，让浏览器逐帧重算模糊，元素一多就明显卡顿。
| 写法 | 每帧要做的事 | 建议 |
|---|---|---|
| transition: box-shadow | 逐帧重新计算并重绘模糊 | 单个元素可以，长列表慎用 |
| 伪元素放目标阴影 + transition: opacity | 只做合成，不重绘模糊 | hover 阴影效果推荐这种 |
| 配合 transform: translateY(-2px) | 同样只做合成 | 加上才像抬起，不然像原地变胖 |
本工具只负责把 box-shadow 这一条声明调好并复制出来，过渡、伪元素与 hover 状态要在你自己的项目里写；把静态态和悬停态分别在这里调好、各复制一份，是最省事的做法。