CSS 박스 그림자 생성기
하나 이상의 그림자 레이어에 대해 오프셋·흐림·확산·색상·투명도를 조정하면 박스가 실시간으로 갱신됩니다. 프리셋으로 시작하거나 직접 만든 뒤 생성된 CSS를 복사할 수 있습니다.
Preview
px
10%
레이어 1
box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.1);사용 방법
- 오프셋·흐림·확산·색상을 조정하거나 프리셋을 고릅니다.
- 겹친 효과가 필요하면 그림자 레이어를 추가합니다.
- 생성된 CSS를 복사합니다.
자주 묻는 질문
- inset 옵션은 무엇을 하나요?
- 그림자를 박스 바깥이 아닌 안쪽에 그려서 눌린 듯한 느낌을 만듭니다.
- 그림자 레이어는 몇 개까지 쌓을 수 있나요?
- 각각 고유한 오프셋·흐림·확산·색상을 가진 레이어를 최대 5개까지 쌓을 수 있습니다.
개인정보 처리
그림자는 브라우저에서 생성되며 서버로 전송되지 않습니다.
관련 도구
- HEX RGB 색상 변환기
HEX·RGB·HSL 사이에서 색상값을 변환하고 스타일시트나 디자인 도구에 필요한 표기를 복사합니다. 모든 변환이 브라우저에서 이루어집니다.
- CSS 그라데이션 생성기
선형·방사형·원뿔형 CSS 그라데이션을 실시간 미리보기로 만듭니다. 색상, 방향, 정지점을 조정하고 CSS를 복사하세요.
- 컬러 팔레트 생성기
기준 색상과 보색·삼각 배색 같은 조화 규칙으로 어울리는 컬러 팔레트를 생성합니다. 모든 색상을 HEX로 복사할 수 있습니다.