CSS盒阴影生成器
为您的UI元素创建逼真、平滑和分层的阴影。
可视化调整偏移、模糊、扩散和颜色，然后复制CSS。 100%免费 — 无需注册。
∞阴影层
99%+浏览器支持
0需要注册
Preview
CSS Output:
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15); Layers
Layer 1
Shadow Color#000000
常见用例
阴影在UI设计中影响最大的地方
🃏
卡片提升
为卡片和容器添加深度。精致的阴影创造视觉层次，使内容突出。
🔘
按钮状态
用内阴影创建按下/抬起按钮效果。清晰显示交互状态变化。
🪟
模态对话框
大而柔和的阴影用于模态和弹出窗口创造悬浮效果，将它们与背景分离。
🎨
新拟态
软UI设计趋势，使用明暗阴影创建浮雕式的3D界面元素。
理解CSS Box Shadow
box-shadow属性在元素边框周围添加一个或多个阴影效果。与text-shadow不同，box-shadow可以有扩散半径和用于内阴影的inset选项。
阴影属性
- X偏移: 水平距离。正值=右，负值=左。
- Y偏移: 垂直距离。正值=下，负值=上。
- 模糊半径: 值越大，阴影越大越淡。不能为负。
- 扩散半径: 正值扩展，负值收缩。默认为0。
- 颜色: 阴影颜色。使用rgba()控制透明度。
- 内阴影: 将阴影从外部（默认）改为内部。创建按下效果。
自然阴影的专业提示
- 使用多个分层阴影获得更逼真的深度。
- 使阴影方向与您的光照模型匹配。
- 细微的阴影（低不透明度、柔和模糊）看起来更专业。
- 避免纯黑——使用深灰或带色调的阴影。
代码示例
各种UI模式的即用阴影示例
CSSBasic Shadows
/* Simple shadow */
.card {
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
}
/* Layered shadow (smoother) */
.smooth-card {
box-shadow:
0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24);
}
/* Large elevation */
.modal {
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25);
}CSSInset & Neumorphism
/* Inset shadow (pressed state) */
.button-pressed {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
/* Neumorphism effect */
.neumorphic {
background: #e0e5ec;
box-shadow:
9px 9px 16px rgba(163,177,198,0.6),
-9px -9px 16px rgba(255,255,255,0.5);
}
/* Neumorphism pressed */
.neumorphic-pressed {
box-shadow:
inset 6px 6px 10px rgba(163,177,198,0.6),
inset -6px -6px 10px rgba(255,255,255,0.5);
}常见问题
我可以分层多少个阴影？
没有限制！用逗号分隔每个阴影。分层阴影比单个重阴影创造更逼真的深度。常见模式使用2-4层。
内阴影用于什么？
内阴影出现在元素内部，创造按下或凹陷的外观。非常适合按钮按下状态、输入框或容器内的深度。
为什么我的阴影不起作用？
常见问题：元素有overflow: hidden裁剪阴影、阴影颜色与背景匹配、或父元素裁剪。检查z-index和父容器。
如何创建新拟态效果？
使用两个阴影：一个亮色向左上偏移，一个暗色向右下偏移。两者都应使用柔和的模糊和接近背景的颜色。