阴影生成器
UpBox优盒工具箱，免费在线 CSS 阴影生成器，可视化调节 box-shadow 的偏移、模糊、扩散、颜色与透明度，支持多层叠加、实时预览与代码复制。
无需注册 · 数据不上传No sign-up · nothing uploaded
实时预览Live preview
实时预览
调整任一参数，预览与代码同步更新
透明度的取值范围是 0–1，输出为 rgba；多层阴影按列表顺序叠加，先写的在上层
阴影图层Shadow layers
本工具所有运算在本地浏览器完成，你的文件、文本不会上传到服务器
工具介绍
阴影写不好，卡片不是发灰就是像贴了层灰纸。这里把 X/Y 偏移、模糊、扩散、颜色和透明度拆开调，左边卡片实时变化，右边代码跟着走。 A hand-written shadow either looks muddy or like grey paper glued on. Here offset, blur, spread, colour and opacity are separate controls, and the sample card updates while the code follows.
单层不够时再加一层：近处一层薄的定轮廓，远处一层大的做体积，最多四层。预设给了卡片、悬浮、内凹和光晕四个起点。 Add a second layer when one is not enough: a thin near shadow for the edge and a wide soft one for depth, up to four. Presets start you at card, float, inset and glow.
- 多图层叠加Layer stacking
- 实时预览Live preview
- 六项参数Six controls
- 四个预设Four presets
- CSS 复制CSS copy
使用说明
- 调整偏移、模糊与扩散。Set offset, blur and spread.
- 选颜色并调透明度。Pick a colour and opacity.
- 需要时添加更多图层。Add layers if needed.
- 复制生成的 CSS。Copy the CSS.
常见问题
数值范围有限制吗？Are values limited?
X/Y 为 ±200px，模糊 0–200px，扩散 ±100px，超出会夹到边界，避免误输入撑坏布局。X/Y cap at ±200px, blur at 200px and spread at ±100px; out-of-range input is clamped.
为什么预览和网页里不一样？Why does the preview differ from my page?
预览卡片是白底，阴影在浅色背景上更明显；换到深色背景需自行调低透明度。The sample is white, where shadows read strongest; lower the opacity on dark backgrounds.
能输出 Tailwind 类名吗？Does it output Tailwind classes?
不能，只输出标准 box-shadow 声明，Tailwind 需用任意值写法自行转换。No, it emits a standard box-shadow declaration; convert to an arbitrary-value Tailwind class yourself.
多层顺序会影响结果吗？Does layer order matter?
会，先写的图层绘制在上层，通常把贴身的小阴影放前面。Yes, earlier layers paint on top — usually the tight shadow goes first.