这个工具有问题吗？

关于「CSS Box Shadow Generator Online」

该工具使用偏移、模糊、扩散、颜色和不透明度的滑块直观地构建 CSS box-shadow 值。您可以实时看到阴影更新，满意后复制匹配的 CSS。

盒阴影增加深度、将元素与背景分开，并表示交互性（悬停状态、按下状态、聚焦元素）。多层阴影可以模拟复杂的照明设置，例如 Material Design 高度或新拟物效果。

用它制作卡片、模态、弹出框、按钮以及任何需要视觉提升的 UI 元素。生成器可以输出经典的 box-shadow、多个阴影层和现代偏移/模糊组合。

如何使用这个工具

如何拼出一条 box-shadow CSS 声明

  1. 偏移

    「X offset (px)」与「Y offset (px)」分别水平移动（正值向右）与垂直移动（正值向下）。CSS 默认无偏移；常见卡片阴影 Y 一般是 `4` 之类，X 接近 0。

  2. 模糊与颜色

    「Blur (px)」控制柔和度——0 边缘锐利，10+ 朦胧。「Color」接受任意 CSS 颜色，包括带 alpha 的 rgba/hex。淡雅 UI 阴影常用 `rgba(0,0,0,0.15)` 配中等模糊。

  3. 点击运行

    结果只有 `css`：`<x>px <y>px <blur>px <color>`。粘到 `box-shadow:` 的值上。本工具不输出 spread 与 inset；语法允许，但这里固定四参数形式。

  4. 多层叠加阴影

    实际设计常以逗号叠 2-3 层（一条长而柔 + 一条短而紧）形成层次。用本工具分别生成，再手动用逗号拼到同一个 `box-shadow:` 里。

相似工具