CSS 盒子阴影生成器
可视化构建 CSS box-shadow 值——通过实时预览调整偏移、模糊、扩展和颜色。
CSS 输出
box-shadow: 0px 4px 12px 0px #00000026;为什么选择 PixConvert 盒子阴影生成器
可视化 box-shadow 编辑器——无需猜测数值,拖动即可预览。
实时预览
在逼真的卡片预览上查看阴影效果——每次拖动滑块都会即时更新。
多层阴影
叠加多个阴影层,打造更有层次的深度效果。每一层都可独立控制。
内阴影
切换内阴影模式,轻松实现按钮按下效果和内发光样式。
颜色与不透明度
任意选择阴影颜色,并通过独立的不透明度滑块调节。输出使用 rgba,透明度更精确。
即用的 CSS 输出
输出为有效的 box-shadow CSS 值字符串——可直接粘贴到你的样式表或设计令牌中。
100% 隐私安全
纯客户端运行——无需服务器,不收集任何数据。
盒子阴影的使用场景
阴影能在 UI 设计中营造深度和层级感。
卡片层级
为卡片、模态框和面板创建 Material Design 风格的层级阴影。
- Elevation 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 偏移:阴影的位置。模糊:阴影的柔和程度(0 = 硬边)。扩展:阴影尺寸的变化(负值 = 缩小)。inset:在元素内部绘制阴影。
如何创建柔和的阴影?
增大模糊半径(20-40px),让扩展半径保持在 0 附近,并使用低不透明度的颜色(rgba(0,0,0,0.1-0.2))。再稍微加一点偏移(y:4-8px)。这样就能得到设计系统中常见的现代「柔和投影」效果。
可以叠加多个阴影吗?
可以。CSS 支持以逗号分隔的多个阴影值:box-shadow: shadow1, shadow2, shadow3。点击「添加阴影层」按钮,就能构建新拟态或多彩发光等层叠效果。
模糊和扩展有什么区别?
模糊控制阴影边缘的柔和程度——模糊值越高,阴影越扩散。扩展控制阴影的大小——正的扩展值会让阴影比元素更大,负的扩展值则让阴影更小。扩展不会影响模糊效果。
box-shadow 会影响布局吗?
不会。box-shadow 绘制在盒模型之外,不会影响元素的尺寸、位置或文档流。如果你需要为阴影在元素周围预留空间,请改用 margin 或 padding。