🔲 CSS Box Shadow Generator
Design CSS box shadows visually with live preview. Control offset, blur, spread, color, and inset. Layer multiple shadows. Copy CSS one click. Free box-shadow generator.
Preview
How to Use
1
Adjust the sliders
Set X offset, Y offset, blur, and spread with the sliders. Toggle Inset for an inner shadow.
2
Pick a color
Click the color swatch to open the color picker. Adjust opacity for semi-transparent shadows.
3
Stack layers and copy
Add multiple shadow layers for depth. Click Copy CSS to get the complete box-shadow declaration.
Frequently Asked Questions
What are the box-shadow values?
box-shadow takes: horizontal-offset vertical-offset blur-radius spread-radius color. Positive horizontal moves right, positive vertical moves down. Blur softens the shadow. Spread expands it. The optional inset keyword makes it an inner shadow.
What does "inset" do in box-shadow?
The inset keyword turns the shadow from an outer drop shadow into an inner shadow that appears inside the element. Inner shadows are useful for creating pressed/sunken button effects, input field depth, and embossed designs.
Can I add multiple shadow layers?
Yes — CSS box-shadow accepts multiple comma-separated values. Each layer adds depth. Stacking a tight hard shadow with a larger soft shadow creates realistic elevation effects like Material Design cards.
What is the difference between blur and spread?
Blur determines how soft/fuzzy the shadow edges are (0 = hard sharp edge). Spread expands or contracts the shadow before blurring — positive spread makes the shadow larger than the element, negative shrinks it.
How do I copy the CSS to my project?
Click the Copy CSS button to copy the full box-shadow declaration to your clipboard. The output is ready to paste directly into your stylesheet.
完整指南：CSS box-shadow生成器
什么是box-shadow？
box-shadow在不影响文档流的情况下为元素添加阴影。接受X/Y偏移、模糊半径、扩散半径、颜色和inset。多重阴影可实现复杂效果如新拟态设计。
如何使用
- 调整滑块：X/Y偏移、模糊、扩散。
- 选择颜色。
- 启用Inset创建内阴影。
- 复制生成的CSS。
专业技巧
- 使用半透明颜色（
rgba）以适应浅色和深色主题。 - Material Design阴影：
0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.1)。 - 用逗号分隔的多重阴影可创建层次感。