CSS工具/盒阴影生成器
盒阴影生成器
使用多层和实时预览创建精美的盒阴影
预览
#F8FAFC
阴影图层
层 1
#0000001a
0px
4px
6px
-1px
层 2
#0000001a
0px
2px
4px
-2px
预设
Loading...CSS Box Shadow Guide
Learn how to create depth and dimension with shadows
What is Box Shadow?
The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets, blur and spread radius, and color. It can create depth, highlight elements, and add visual interest to your designs.
How to Use This Tool
- Add shadow layers using the Add Layer button
- Adjust X/Y offset to position the shadow
- Control blur and spread for softness and size
- Toggle 'inset' for inner shadows, then copy the CSS
Pro Tips
- Use multiple subtle shadows for more realistic depth effects
- Negative spread values create tighter, more focused shadows
- Combine outer and inset shadows for neumorphism effects
Browser Support
Box-shadow is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It has been widely supported since IE9, making it safe for production use.
常见问题
盒子阴影和投影阴影有什么区别？
box-shadow对元素的整个盒子（包括边框）应用阴影，保持矩形形状。而drop-shadow是filter属性的一部分，它会沿着元素的实际形状（包括透明区域）创建阴影。对于PNG图像或不规则形状，drop-shadow更合适。
如何同时应用多个阴影？
在CSS中，多个阴影用逗号分隔，在一个box-shadow属性中声明。例如：'box-shadow: 2px 2px 4px rgba(0,0,0,0.2), 4px 4px 8px rgba(0,0,0,0.1);'。先声明的阴影显示在上面，组合多个图层可以创造更逼真的深度感。
什么时候使用inset阴影？
添加inset关键字可以使阴影显示在元素内部，创造凹陷效果。常用于输入框、按钮按下状态和拟态设计。同时使用外部阴影和内部阴影可以创建立体的UI元素。
如何选择阴影颜色？
为了自然的阴影效果，不要使用纯黑色(#000)，而是使用带透明度的深色。rgba(0, 0, 0, 0.1~0.3)范围比较常见。在彩色设计中，使用比背景色更深的同色系颜色可以创造和谐的阴影。
盒子阴影会影响性能吗？
在许多元素上应用复杂的阴影（尤其是大模糊值）可能会影响渲染性能。应避免在滚动或动画期间更改阴影，可以使用will-change属性或使用阴影图像作为替代。