所有工具
Box Shadow Generator
Generate box shadows
Generate box shadows 在您的浏览器中本地运行
CSS
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
About the
盒子阴影生成器通过实时预览和 CSS 从偏移、模糊、扩散、颜色和不透明度构建阴影。人们混淆的两个设置是模糊和扩散：模糊会柔化阴影形状向外和向内的边缘，而扩散会在模糊发生之前增大或缩小阴影本身的大小。负扩散可以防止软阴影看起来像光环，这就是为什么这里的默认值使用一个小的负值。
Where people use the
- 为卡片、模态框和菜单构建高度比例。
- 制作带有插入阴影的按下或聚焦状态。
- 软化边框而不添加真正的边框。
- 检查设计规范的阴影值实际上是什么样子。
How to use the
- 1
设置偏移量
偏移 X 将阴影向右移动，偏移 Y 将阴影向下移动。负值则相反。
- 2
设置模糊和扩散
模糊可以柔化边缘。 Spread 在模糊之前扩大阴影；对位于元素下方而不是周围的阴影使用较小的负扩散。
- 3
选择颜色和不透明度
完全不透明的纯黑色看起来很刺眼。低不透明度（大约在 8% 到 20% 之间）读起来是深度而不是污垢。
- 4
如果你想要内阴影，请勾选插入
插图在元素内部而不是元素后面绘制阴影，这适合受压状态和井。
- 5
复制 CSS
该规则包括 rgba 颜色，因此可以直接将其粘贴到样式表中。
提示和最佳实践
- 两层阴影看起来比一层厚阴影要好得多。
- 保持光源一致：如果一张牌投射到右下方，那么所有的牌都应该投射到右下方。
- 注意父级剪切阴影并隐藏溢出。
常见问题
模糊和扩散有什么区别？
展开会在任何软化之前改变阴影形状的大小，正值表示增大，负值表示缩小。然后模糊按给定的半径柔化边缘。为了在卡片下获得紧密的阴影，您需要小的模糊和稍微负的扩散。
为什么我的影子看起来又灰又脏？
因为它是高不透明度的纯黑色。使用较低的 Alpha（大约 0.08 到 0.2），并考虑将阴影着色为背景色调，这样读起来更自然。
我可以有多个影子吗？
是的。在同一个声明中用逗号分隔多个阴影；它们从前到后堆叠，因此第一个在顶部。分层阴影是如何构建柔和、真实的立面效果的。
盒子阴影会影响布局吗？
不会。阴影绘制在元素框外，不占用任何空间，因此可以通过隐藏溢出的父级或紧密的容器来剪裁它们。
为盒子阴影制作动画很昂贵吗？
是的，相对而言。更改模糊或扩散会迫使浏览器每帧重新绘制阴影。为了实现平滑运动，请对不透明度进行动画处理或进行变换，或者在两个预渲染阴影之间进行交叉淡入淡出。