UTILS.
100% 브라우저 내 실행

CSS Box Shadow 생성기

실시간 미리보기로 box-shadow를 시각적으로 디자인하고 CSS를 복사하세요.

이 도구에 대하여

오프셋, 블러, spread, 색상, 투명도 슬라이더를 드래그해 CSS box-shadow를 시각적으로 만들고 바로 사용할 수 있는 규칙을 복사하세요. 모든 변경 사항이 실시간으로 반영되며 전적으로 브라우저에서 실행됩니다.

자주 묻는 질문

spread 값은 어떤 역할을 하나요?
spread는 블러가 적용되기 전에 그림자를 키우거나(양수) 줄여서(음수) 요소보다 더 크거나 더 작게 만듭니다.
inset 그림자란 무엇인가요?
inset은 그림자를 요소 바깥이 아닌 안쪽에 그립니다. 눌린 버튼이나 내부 광택 효과를 만들 때 유용합니다.

더 많은 도구