CSS 박스 그림자 생성기
슬라이더로 시각적으로 박스 그림자를 디자인하고 CSS 코드를 즉시 얻으세요.
100% Client-Side
5px
5px
15px
0px
30%
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.30);
개요 CSS 박스 그림자 생성기?
CSS box-shadow 속성을 시각적으로 편집하고 코드를 생성합니다. 슬라이더로 그림자의 위치, 크기, 색상을 조절하며 실시간 미리보기를 확인할 수 있습니다.
사용 방법
- 수평/수직 오프셋을 조절하세요
- 블러와 확산 값을 설정하세요
- 그림자 색상과 투명도를 선택하세요
- 생성된 CSS 코드를 복사하세요
공식
box-shadow: offset-x offset-y blur spread color;
자주 묻는 질문
- inset 그림자란 무엇인가요?
- 요소 안쪽으로 들어가는 그림자입니다. 눌린 버튼이나 입력 필드 효과를 만들 때 사용합니다.
- 여러 그림자를 동시에 적용할 수 있나요?
- 네, 쉼표로 구분하여 여러 그림자를 중첩할 수 있습니다. 이를 통해 복잡한 입체 효과를 만들 수 있습니다.
- 그림자가 성능에 영향을 주나요?
- 블러 값이 크면 렌더링 비용이 증가합니다. 모바일에서는 적절한 블러 값을 사용하는 것이 좋습니다.