盒子阴影生成器
可视化工具，用于创建和复制CSS box-shadow代码。
环境
#e0e0e0
#e0e0e0
24px
CSS输出
border-radius: 24px; background: #e0e0e0; box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25);
图层 1
0px
4px
14px
0px
#000000
25%
可视化设计 CSS 盒子阴影
概述
盒子阴影生成器让你通过拖动滑块来打造 CSS box-shadow 属性，而不必猜数字。阴影为按钮、卡片和模态框增添深度与层次，但其语法（偏移、模糊、扩展、颜色和 inset）手写起来很繁琐。此工具在你调整每个值时显示实时预览，并给出可复制的确切 CSS，全部在浏览器中完成。
使用步骤
- 1
调整滑块
一边观察实时预览，一边设置水平和垂直偏移、模糊、扩展和颜色。
- 2
如需堆叠阴影
为增加深度添加多层阴影，或打开 inset 制作内阴影。
- 3
复制 CSS
取用生成的 box-shadow 值，粘贴进你的样式表或组件。
工作原理
box-shadow 属性接收水平和垂直偏移、模糊半径、可选的扩展以及颜色（通常带透明度）。你移动各滑块，预览即时更新，从而准确看到阴影如何投射。工具会写出对应的 box-shadow 声明，若你添加多层堆叠阴影也会一并包含，随时可粘贴进样式表。
什么时候用
为卡片或按钮添加微妙阴影使其浮出页面。无需目测数值即可匹配设计稿中的阴影。用多层堆叠构建真实感的分层阴影。为按下或内凹的 UI 元素创建 inset 阴影。为深浅主题微调阴影的柔和度与颜色。学习每个 box-shadow 值如何影响结果。
常见问题
依次为：水平偏移、垂直偏移、模糊半径和扩展。偏移移动阴影，模糊柔化其边缘，扩展放大或缩小它。随后是颜色，为求微妙常用低不透明度的 rgba()。
注意事项
沉重或众多的 box-shadow 会损害渲染性能，尤其在动画时。对频繁移动或更新的元素，请保持阴影微妙并限制堆叠层数。