CSS 박스 그림자 생성기

CSS 박스 그림자 생성기란?

CSS 박스 그림자 생성기는 CSS box-shadow 속성을 시각적으로 편집하는 무료 도구로, 프런트엔드 개발자와 디자이너를 위해 만들어졌습니다. 그림자 레이어를 하나 이상 추가하고 각 레이어의 offset-x, offset-y, 블러 반경, 스프레드 반경, 색상, inset 여부를 간단한 숫자 입력과 색상 선택기로 조정합니다. 바둑판 배경 위의 미리보기 박스가 합쳐진 결과를 실시간으로 보여 주고, 각 레이어를 쉼표로 구분한 완성된 box-shadow 선언이 생성되어 복사할 수 있습니다. 부드러운 입체감 그림자, 또렷한 뉴모피즘, 발광 효과, 머티리얼 스타일의 레이어 깊이까지 값 순서를 외우지 않고도 만들 수 있습니다.

CSS 박스 그림자 생성기 사용법

1. 첫 레이어의 offset-x와 offset-y(px)를 설정해 그림자를 가로·세로로 이동합니다. 음수 값은 왼쪽이나 위로 이동시킵니다.
2. 블러 반경(그림자의 부드러움)과 스프레드 반경(그림자가 커지거나 작아지는 정도)을 조정합니다.
3. 스와치로 색을 고르거나 16진수 값을 입력합니다 — #00000040 같은 8자리 16진수는 그림자의 투명도를 설정합니다.
4. inset 체크박스를 켜면 그림자를 요소 바깥이 아닌 안쪽에 그립니다.
5. ‘레이어 추가’를 눌러 다른 그림자를 위에 쌓고 값을 편집해 조정합니다. 각 레이어는 휴지통 버튼으로 삭제합니다.
6. 미리보기가 갱신되는 것을 확인한 뒤 생성된 box-shadow CSS를 스타일시트에 복사합니다.

예시

x 0, y 4, 블러 12, 스프레드 0, 색 #00000040

box-shadow: 0px 4px 12px 0px #00000040;

레이어 1: 0 1 2 0 #0000001a · 레이어 2: 0 8 24 -4 #00000026

box-shadow: 0px 1px 2px 0px #0000001a, 0px 8px 24px -4px #00000026;

inset 체크, x 0, y 2, 블러 6, 스프레드 0, 색 #00000059

box-shadow: inset 0px 2px 6px 0px #00000059;

자주 묻는 질문

box-shadow 값의 순서는 어떻게 되나요?

각 레이어는 offset-x, offset-y, 블러 반경, 스프레드 반경, 색상 순으로 쓰며 앞에 선택적으로 inset 키워드를 붙입니다. 이 도구는 네 길이(offset-x, offset-y, 블러, 스프레드)를 항상 px로 출력하므로 순서가 명확하고 이후 직접 손보기도 쉽습니다.

반투명하거나 컬러 그림자를 넣을 수 있나요?

네. 색상 필드에 아무 CSS 색이나 입력하세요 — #00000040 같은 8자리 16진수(마지막 두 자리가 알파)는 반투명 그림자를 만들고, 색 이름이나 임의의 16진수도 쓸 수 있습니다. 선택기 스와치는 단색 #rrggbb를 다루며, 알파가 필요하면 텍스트 필드를 편집하세요.

여러 그림자를 어떻게 쌓나요?

추가 그림자마다 ‘레이어 추가’를 누르세요. 생성된 CSS는 각 레이어를 위에서 아래 순서로 쉼표로 구분합니다 — 첫 레이어가 가장 나중에(맨 위에) 그려집니다. 머티리얼 스타일 레이어 깊이나 외부 글로우와 inset 하이라이트를 결합할 때 유용합니다.

inset 체크박스는 무엇을 하나요?

inset은 그림자를 요소 테두리 안쪽에 그려 바깥 드롭 섀도가 아니라 눌린 듯한/안쪽 발광 느낌을 만듭니다. 레이어마다 켤 수 있고, 같은 box-shadow 값 안에서 inset과 바깥 그림자를 섞을 수 있습니다.

제 데이터가 어딘가로 업로드되나요?

아니요. 이 생성기는 전부 JavaScript로 브라우저 안에서 실행됩니다 — 색상과 값이 서버로 전송되지 않으므로 비공개로 작동하며, 페이지를 한 번 로드한 뒤에는 오프라인에서도 사용할 수 있습니다.