盒阴影生成器

什么是阴影与按钮生成器？#

box-shadow 是那条”在元素背后画一道投影”的 CSS 规则。名字虽然叫阴影，它能做的事远不止投个影：堆叠得当，它能做出让现代卡片、按钮有”浮起来”质感的柔和抬升；能向内雕刻出一道凹陷，模拟”按下”的状态；还能在聚焦的输入框外圈仿出一圈带颜色的辉光。难点在于，要调出一道像样的阴影，每个图层得同时拿捏五个数值（水平偏移、垂直偏移、模糊、扩展、颜色），再加一个可选的 inset 关键字——而真正的按钮往往要叠两三层，于是你常常得手工调十几个数字。

本页把这套算术省掉。侧边栏里堆叠阴影图层、调按钮的圆角/边框/内边距/配色，右侧立刻画出带阴影的按钮，并同时吐出 .btn 的 CSS 规则和配套的 <button> HTML，复制即用。你打开页面看到的默认样式，就是各大设计系统里常见的那种双层抬升按钮——一个很好的起点，往你的品牌色微调即可。

怎么使用#

侧边栏放控件，右侧放预览、CSS 输出和 HTML 输出。

1. 搭阴影。 在阴影图层下，点 + Add layer 新增一层。每一层有六个控件：
   • 水平偏移 / 垂直偏移 —— 阴影往右、往下移多少（负值往左、往上）。都填 0 就是居中，得到一圈均匀辉光。
   • 模糊（Blur） —— 边缘有多柔。0 是一道硬边平移副本；数值越大越发散。CSS 里模糊不能为负。
   • 扩展（Spread） —— 把阴影整体放大或缩小。负扩展能把一层宽模糊收成一道紧贴、逼真的边。
   • 颜色（Color） —— 十六进制。带上 alpha 通道（8 位 hex，如 #00000033）就是半透明；完全不透明的颜色会渲染成纯净的 #RRGGBB。
   • 内阴影（Inset） —— 打开后阴影画在元素内侧（凹陷、被按下的观感），而不是背后。
   • 上移 / 下移 / 删除 —— 调整图层顺序或移除。列表里第一层画在最上面，最后一层在最底下。
2. 调按钮。 在按钮下填 标签（Label） 文本，再调 圆角（Radius）、边框（Border） 宽度、边框颜色、上下/左右内边距（Padding Y / X）、背景色（Background）、文字颜色（Text）。颜色字段是十六进制输入框配原生取色器。
3. 需要哪段复制哪段。 CSS 输出旁的 复制 取走整条 .btn 规则；HTML 输出旁的 复制 取走 <button> 元素。边框宽度设成 0，输出会把边框塌缩成 border: none;。

主要特性#

• 多层、有顺序。 一道像样的阴影几乎总是两三层叠加——一层紧贴元素的深色硬边，加上一层更远、更淡的弥散。需要叠几层、按什么顺序叠，随你。
• 颜色按 alpha 智能序列化。 完全不透明的颜色输出成干净的 #RRGGBB；一旦带透明度就切换成 rgba(r, g, b, a)、alpha 还会去尾零——正是真实样式表里实际在用的两种写法。
• 整颗按钮一条规则搞定。 圆角、边框、内边距、背景、文字色、阴影全塞进同一个 .btn 块，粘贴一次就把元素完整上好样式。
• HTML 配套对齐。 HTML 输出就是 <button class="btn">标签</button>，标签经过 HTML 转义——哪怕标签里全是 < 或 &，粘贴也安全。
• 预览强制从左到右。 正的水平偏移永远把阴影往右推，所以预览无论页面什么语言都钉成 LTR。

实例演示#

页面默认就带着一颗现成的靛蓝色抬升按钮。它的阴影是两层：一层 -1px 扩展的硬边紧贴按钮，另一层更宽更淡的弥散在外圈托底。生成的 CSS 原文：

.btn {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.102);
  border-radius: 8px;
  border: none;
  padding: 10px 20px;
  background-color: #4F46E5;
  color: #FFFFFF;
}

注意两层是配合着用的：第一层（4px 6px 模糊、-1px 扩展、0.2 alpha）定义那条干脆的接触边；第二层（10px 15px 模糊、-3px 扩展、0.102 alpha）提供整体的环境抬升。把 alpha 去掉，阴影就变成一坨死黑印章；把扩展调大，按钮就像浮得太高了。

要做按下状态，把那两层清掉，新增一层：Inset 打开，偏移 0/2，模糊 4，扩展 0，颜色 #00000033。输出变成 inset 0 2px 4px rgba(0, 0, 0, 0.2)——元素看上去就像陷进了表面里，正好拿去当 :active 样式。

常见问题#

我明明填的是 hex，为什么颜色出来变成 rgba(...) 了？#

当你的 hex 带 alpha 通道（8 位，比如 #00000033）时，工具会序列化成 rgba(r, g, b, a)，因为这是大多数 CSS 工具链和旧浏览器解析最稳的形式。完全不透明（没有 alpha，或 alpha 为 FF）的颜色，才会保持紧凑的 #RRGGBB。两种写法渲染出来跟你调的完全一致，纯粹是下游哪种记号更稳妥的区别。

多层阴影按什么顺序画？#

列表里第一层画在最上面，最后一层在最底下。要做出自然的抬升感，把那层又锐又深又近的放第一，那层又柔又淡又远的放第二——这样紧贴的接触边才不会被环境弥散盖住。用 上移 / 下移 反复试，直到预览看着顺眼。

模糊和扩展到底差在哪？#

模糊柔化阴影的边缘（从满色到透明的一道渐变）。扩展则是在模糊之前，先把整道阴影整体放大或缩小一个固定量——正扩展让它更大更实，负扩展往里收，是那种”宽模糊但边缘紧致”的专业观感的秘诀。常见错误是只调模糊、得到一坨蓬松的云；加 -2px 或 -3px 扩展，立刻就收紧成形。

这阴影能用在 div 上吗，还是只能按钮？#

可以。这条 CSS 对任何能接 box-shadow 的元素都生效——只复制 box-shadow: 那一行（或者把整条规则改名成你的选择器），扔掉你不需要的按钮专属声明即可。HTML 输出只在你真的想要一个 <button> 时才有意义。