Trình tạo bóng hộp CSS miễn phí trực tuyến
Build beautiful box shadows visually and copy the CSS.
Presets
4px
4px
10px
0px
25%
box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.25);
How to Use
- Drag the sliders to adjust horizontal/vertical offset, blur, spread, and opacity.
- Pick a shadow color and toggle inset if needed.
- Click Add Shadow Layer to stack multiple shadows.
- Use a preset for a quick starting point.
- Click Copy CSS to paste the result into your stylesheet.
Frequently Asked Questions
What is box-shadow in CSS?
The CSS box-shadow property adds shadow effects around an element. It takes values for horizontal offset, vertical offset, blur radius, spread radius, and color.
Can I add multiple shadows?
Yes. Click "Add Shadow Layer" to add another shadow. Multiple shadows are separated by commas in the CSS output. This lets you create complex layered effects.
What does the inset keyword do?
Adding inset makes the shadow appear inside the element rather than outside, creating an inner shadow or "pressed" effect.