CSS 阴影生成器
直观地构建 CSS 阴影值——通过实时预览调整偏移量、模糊度、扩散度和颜色。
CSS 输出
box-shadow: 0px 4px 12px 0px #00000026;为什么使用 PixConvert 盒阴影生成器
可视化阴影编辑器——无需猜测数值，只需拖拽即可预览。
实时预览
在逼真的卡片预览中查看您的影子——每次滑块更改都会立即更新。
多层阴影
叠加多个阴影图层，可实现更高级的景深效果。每个图层均可独立控制。
内嵌阴影
切换按钮按下效果和内部发光样式的内嵌模式。
颜色 + 不透明度
可使用单独的不透明度滑块选择任意阴影颜色。输出采用 RGBA 格式以实现精确的透明度。
已准备好的 CSS 输出
输出结果是一个有效的 box-shadow CSS 值字符串——直接粘贴到你的样式表或设计令牌中。
100% 私密
纯客户端——无需服务器，无需数据收集。
阴影框的使用案例
阴影在用户界面设计中创造深度和层次感。
卡片提升
为卡片、模态框和面板创建 Material Design 风格的阴影效果。
- 海拔1-24阴影比例尺
- 浮动操作按钮阴影
- 对话框叠加阴影
按钮深度
为按钮添加微妙的阴影和内嵌按压效果，以营造 3D 立体感。
- 鼠标悬停时产生微妙的阴影效果。
- 按下状态下的内嵌阴影
- 彩色发光效果
新形态学
使用分层光影和暗影构建拟物化 UI 组件。
- 光影层
- 软UI凸起元素
- 嵌入式凹面控制装置
如何创建阴影效果
使用滑块调整 X 轴偏移量、Y 轴偏移量、模糊半径和扩散范围。选择阴影颜色和不透明度。
立即查看实时预览更新。复制 CSS 值并将其粘贴到您的样式表中。
切换内嵌阴影或堆叠多个阴影以构建分层效果——输出以逗号分隔，可直接粘贴。
常见问题解答
CSS box-shadow 详解。
box-shadow 的参数是什么？
box-shadow: [inset] x-offset y-offset blur-radius spread-radius color. X/Y offset: 阴影位置。Blur: 模糊程度（0 = 硬边缘）。Spread: 尺寸扩展（负值 = 缩小）。Inset: 在元素内部绘制阴影。
如何创建柔和的阴影？
增大模糊半径（20-40像素），保持扩散值接近0，并使用低不透明度的颜色（rgba(0,0,0,0.1-0.2)）。略微偏移（y轴偏移4-8像素）。这样就能创建设计系统中常见的现代“柔和阴影”效果。
我可以叠加多个阴影吗？
是的。CSS 接受多个以逗号分隔的阴影值：box-shadow: shadow1, shadow2, shadow3。使用“添加阴影图层”按钮可以创建分层效果，例如拟物化或多色发光效果。
模糊和扩散有什么区别？
模糊控制阴影边缘的柔和程度——模糊程度越高，阴影越柔和。扩散控制阴影的大小——正扩散值使阴影大于元素，负扩散值使阴影小于元素。扩散值不影响模糊程度。
阴影效果会影响布局吗？
不，box-shadow 是在盒子模型之外渲染的，不会影响元素的大小、位置或文档流。如果需要在元素周围留出阴影空间，请改用 margin 或 padding。