🔲 CSS Box-Shadow 생성기

소개

이 도구는 순수 JavaScript로 브라우저 안에서만 동작합니다. 디자인 데이터는 기기 밖으로 나가지 않습니다. 여러 그림자 레이어를 쌓아 입체감, 뉴모피즘, 글로우 효과, 카드 그림자 등을 자유롭게 표현할 수 있습니다. inset 옵션으로 내부 그림자(눌린 버튼, 내부 발광)도 만들 수 있으며, 출력된 CSS는 어떤 프레임워크나 스타일시트에도 바로 붙여넣을 수 있습니다.

사용 방법

1. '+ 그림자 추가' 버튼을 눌러 첫 번째 그림자 레이어를 만드세요.
2. X 오프셋, Y 오프셋, 블러, 확산, 불투명도 슬라이더로 그림자를 다듬으세요. 'inset'을 켜면 내부 그림자가 됩니다.
3. 색상 스와치를 클릭해 원하는 색상을 선택하세요. 모든 컨트롤이 바뀔 때마다 미리보기가 실시간으로 업데이트됩니다.
4. 레이어를 더 추가해 뉴모피즘이나 겹친 글로우처럼 복잡한 다중 그림자 효과를 만들 수 있습니다.
5. 'CSS 복사' 버튼으로 완성된 box-shadow 선언문을 복사해 스타일시트에 바로 붙여넣으세요.

자주 묻는 질문

이 CSS box-shadow 생성기는 무료인가요?

네, 완전 무료입니다. 회원가입도, 체험 기간도, 숨겨진 비용도 없습니다. 페이지를 열면 바로 사용할 수 있습니다.

인터넷 연결 없이 오프라인에서도 사용할 수 있나요?

네. 이 도구는 서버 호출 없이 브라우저 안에서만 실행됩니다. 페이지가 로드된 후에는 인터넷을 끊어도 정상적으로 작동합니다.

제 디자인 데이터는 안전한가요? 서버에 업로드되나요?

업로드되는 데이터는 없습니다. 모든 그림자 설정은 브라우저 안에서만 처리되고 localStorage에만 저장됩니다. 기기 밖으로 나가는 데이터는 없습니다.

하나의 CSS 규칙에 여러 그림자를 쌓을 수 있나요?

네. '+ 그림자 추가' 버튼을 원하는 만큼 클릭하세요. 모든 레이어가 쉼표로 구분된 하나의 box-shadow 값으로 합쳐집니다. 뉴모피즘, 글로우, 다방향 입체감 표현에 적합합니다.

내부 그림자(inset) 효과는 어떻게 만드나요?

원하는 그림자 레이어에서 'inset(내부)' 체크박스를 체크하면 됩니다. inset 그림자는 요소 안쪽에 그려져 눌린 버튼이나 내부 발광 효과에 유용합니다. CSS에 'inset' 키워드가 자동으로 포함됩니다.