CSS 박스 그림자 생성기
시각적 편집기로 CSS 박스 그림자를 디자인합니다.
Preview
Shadow 1
12px
box-shadow: 4px 4px 15px 0px #00000025;How to Use
- 1
Use the sliders to adjust the shadow offset, blur, spread, and color.
- 2
Add more shadow layers with the Add Shadow button for complex multi-layer effects.
- 3
Copy the CSS box-shadow code and paste it directly into your stylesheet.
Features
Multiple Shadow Layers
Stack multiple box-shadow layers to create complex, realistic drop shadow effects.
Inset Shadow Support
Toggle inset mode to place shadows inside the element for pressed or embossed effects.
Full Control
Adjust X/Y offset, blur radius, spread radius, and color independently for each layer.
Copy CSS
Copy the complete box-shadow CSS property value ready to paste into your code.
FAQ
여러 그림자를 추가할 수 있나요?
네, 여러 그림자 레이어를 추가하고 오프셋, 블러, 스프레드, 색상을 독립적으로 조정할 수 있습니다.
인셋 그림자란?
인셋 그림자는 요소 바깥이 아닌 안쪽에 나타나 들어간 효과를 만듭니다.