상자 그림자 생성기
CSS box-shadow 속성을 생성합니다
그림자 레이어
그림자 1
프리셋 그림자
그림자 팁
오프셋 값이 양수이면 그림자가 아래쪽과 오른쪽으로, 음수이면 위쪽과 왼쪽으로 이동합니다.
흐림 반경은 그림자의 부드러움을 정하며, 값이 클수록 그림자가 더 넓게 퍼집니다.
확산 반경은 그림자 크기를 키우거나 줄입니다.
안쪽 그림자는 깊이감을 주는 내부 그림자를 만듭니다.
여러 그림자를 겹쳐 복잡한 조명 효과를 낼 수 있습니다.
불투명도 값이 낮을수록 더 은은하고 자연스러운 그림자가 만들어집니다.
실시간 미리보기
미리보기 배율: 100%
CSS 선언
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);CSS 클래스
.shadow {
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
}Tailwind CSS (근사치)
shadow스타일 제안입니다. 사용자 지정 오프셋, 색상, 안쪽 그림자, 여러 레이어는 생성된 CSS가 필요합니다.
레이어를 조정하거나 프리셋을 사용해 보세요. 작업하는 동안 미리보기가 갱신됩니다.
상자 그림자 생성기 소개
무료 CSS box-shadow 생성기로 시각적으로 완전히 제어하며 전문적인 그림자 효과를 만들 수 있습니다. 슬라이더로 오프셋, 흐림 반경, 확산 반경, 색상, 불투명도를 조절하고 결과를 실시간으로 확인하세요. 여러 그림자를 겹쳐 UI 요소를 돋보이게 하는 복합 입체 효과도 만들 수 있습니다.
그림자는 최신 웹 인터페이스에서 시각적 위계와 깊이를 만드는 데 필수입니다. 잘 만든 box-shadow는 카드를 페이지 위에 떠 있는 것처럼, 버튼을 눌러 볼 수 있는 것처럼 보이게 하고 내비게이션 요소를 배경에서 돋보이게 합니다. 이 도구는 box-shadow 값을 직접 쓰며 시행착오를 겪을 필요를 없애 줍니다.
이 생성기는 바깥 그림자와 안쪽 그림자(inset), 여러 그림자 레이어를 지원하며 자주 쓰는 그림자 스타일 6가지 프리셋을 제공합니다. 결과는 한 번에 복사할 수 있는 CSS 코드와 대략적인 Tailwind CSS 유틸리티 클래스 제안으로 제공됩니다. 모든 처리는 브라우저에서 이루어지며 서버로 데이터가 전송되지 않습니다.
주요 기능
- 추가, 삭제, 개별 설정이 가능한 여러 그림자 레이어
- X 오프셋, Y 오프셋, 흐림 반경, 확산 반경을 정밀하게 조절하는 슬라이더
- 그림자 레이어마다 HEX 입력과 불투명도 조절이 가능한 색상 선택기
- 안쪽 깊이와 엠보싱 효과를 만드는 안쪽 그림자(inset) 전환
- 그림자 프리셋 6가지: 은은함, 보통, 큼, 매우 큼, 안쪽, 다중
- 창의적인 그림자 조합을 찾아 주는 무작위 그림자 생성
- 요소 색상을 바꿀 수 있는 실시간 미리보기
- 깔끔한 CSS 출력을 한 번에 클립보드로 복사
- CSS 클래스와 대략적인 Tailwind CSS 유틸리티 등 다른 형식으로도 출력
- 어떤 조명 환경에서도 편안하게 편집할 수 있는 완전한 다크 모드 지원
상자 그림자 생성기 사용 방법
- 그림자 레이어 추가: 기본 그림자로 시작하거나 추가를 클릭해 복합 효과를 위한 그림자 레이어를 더 만듭니다.
- 그림자 속성 조절: 슬라이더로 각 그림자 레이어의 X/Y 오프셋, 흐림 반경, 확산 반경, 색상, 불투명도를 설정합니다.
- 안쪽 그림자 전환: 그림자 레이어의 Inset 체크박스를 선택하면 바깥 그림자 대신 안쪽 그림자 효과가 만들어집니다.
- 결과 미리보기: 실시간 미리보기 요소에서 그림자가 어떻게 보이는지 정확히 확인하세요. 필요하면 미리보기 요소의 색상을 바꿉니다.
- 프리셋 사용: 6가지 프리셋 중 하나를 클릭해 자주 쓰는 그림자 스타일을 출발점으로 빠르게 적용합니다.
- CSS 복사: 복사 버튼을 클릭해 완성된 box-shadow CSS 선언을 클립보드에 복사합니다.
활용 사례
- 카드 입체감: 카드 컴포넌트에 깊이를 더해 페이지 배경 위에 떠 있는 것처럼 보이게 합니다.
- 버튼 호버 상태: 사용자의 조작에 시각적으로 반응하는 버튼의 그림자 전환을 만듭니다.
- 모달과 대화 상자 스타일링: 모달과 대화 상자에 크고 부드러운 그림자를 적용해 배경과 분명하게 구분합니다.
- 내비게이션 드롭다운: 드롭다운 메뉴와 팝오버에 레이어와 깊이를 전달하는 그림자를 적용합니다.
- 입력 포커스 효과: 폼 입력란과 상호작용 요소의 포커스 표시로 색이 있는 그림자를 사용합니다.
- 안쪽 효과: 토글 버튼, 활성 상태, 장식 요소에 눌린 듯하거나 엠보싱된 느낌을 만듭니다.
- 뉴모피즘 디자인: 밝은 그림자와 어두운 그림자를 여러 개 조합해 인기 있는 소프트 UI 디자인 느낌을 냅니다.
- 이미지 프레임: 이미지와 미디어 컨테이너에 은은한 그림자를 더해 세련된 갤러리 느낌을 줍니다.
자주 묻는 질문
이 도구는 무료인가요?
네, 상자 그림자 생성기는 만들 수 있는 그림자 수에 제한 없이 완전히 무료입니다. 회원 가입이나 결제는 필요하지 않습니다.
내 데이터는 안전한가요?
그림자 생성과 미리보기는 모두 브라우저 안에서만 이루어집니다. 외부 서버로 데이터가 전송되지 않으므로 설정과 CSS 출력은 완전히 비공개로 유지됩니다.
흐림 반경과 확산 반경은 어떻게 다른가요?
흐림 반경은 그림자가 얼마나 부드럽고 퍼져 보이는지를 조절하며, 값이 클수록 더 완만하게 번집니다. 확산 반경은 요소를 기준으로 그림자의 크기를 키우거나(양수) 줄입니다(음수).
한 요소에 그림자를 여러 개 쓸 수 있나요?
네, CSS는 쉼표로 구분한 여러 box-shadow를 지원합니다. 이 도구에서 그림자 레이어를 여러 개 추가하면 자동으로 하나의 box-shadow 선언으로 합쳐 줍니다.
안쪽 그림자(inset)란 무엇인가요?
안쪽 그림자는 요소 바깥이 아니라 안쪽에 그려져 움푹 들어가거나 눌린 듯한 모양을 만듭니다. 입력란, 버튼의 활성 상태, 뉴모피즘 디자인에 자주 쓰입니다.
box-shadow는 모든 브라우저에서 지원되나요?
네, box-shadow 속성은 Chrome, Firefox, Safari, Edge, Opera를 포함한 모든 최신 브라우저에서 완전히 지원됩니다. 벤더 접두사도 필요 없습니다.
팁과 모범 사례
- 그림자는 은은하게: 낮은 불투명도(5-15%)와 적당한 흐림은 디자인을 압도하지 않는 사실적이고 전문적인 그림자를 만듭니다.
- 음수 확산 사용: 작은 음수 확산 반경을 쓰면 그림자가 요소 아래에서 더 촘촘하고 집중되어 보입니다.
- 그림자 겹치기: 촘촘하고 진한 그림자와 넓고 연한 그림자를 함께 쓰면 실제 조명과 비슷한 자연스러운 깊이가 나옵니다.
- 광원 일치시키기: 디자인 전체에서 오프셋 방향을 일관되게 유지해 하나의 일관된 광원을 표현하세요.
- 성능 고려: 많은 요소에 큰 흐림 값을 쓰면 특히 모바일 기기에서 렌더링 성능에 영향을 줄 수 있습니다.
- 위계에 그림자 활용: 높이가 높을수록(오프셋과 흐림이 클수록) 시각적 스택에서 사용자에게 더 가까운 요소를 나타내야 합니다.