박스 그림자 생성기
CSS 박스 그림자 코드를 시각적으로 만들고 복사합니다.
환경
CSS 출력
border-radius: 24px; background: #e0e0e0; box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25);
레이어 1
추천 도구
유용할 수 있는 엄선된 도구
CSS 박스 그림자를 시각적으로 디자인하기
소개
박스 그림자 생성기는 숫자를 추측하는 대신 슬라이더를 드래그해 CSS box-shadow 속성을 만들게 해줍니다. 그림자는 버튼·카드·모달에 깊이와 위계를 더하지만, 문법(오프셋·블러·스프레드·색상·inset)은 손으로 쓰기 번거롭습니다. 이 도구는 각 값을 조정하면 실시간 미리보기를 보여주고 복사할 정확한 CSS를 제공하며, 전부 브라우저에서 작동합니다.
사용 방법 (단계별)
- 1
슬라이더 조정
실시간 미리보기를 보며 가로·세로 오프셋, 블러, 스프레드, 색상을 설정합니다.
- 2
필요하면 그림자 겹치기
깊이를 위해 그림자 레이어를 여러 개 추가하거나 inset을 켜 안쪽 그림자를 만듭니다.
- 3
CSS 복사
생성된 box-shadow 값을 가져와 스타일시트나 컴포넌트에 붙여넣습니다.
작동 원리
box-shadow 속성은 가로·세로 오프셋, 블러 반경, 선택적 스프레드, 색상(보통 투명도 포함)을 받습니다. 각각 슬라이더를 움직이면 미리보기가 즉시 갱신되어 그림자가 어떻게 떨어지는지 정확히 볼 수 있습니다. 도구는 여러 겹쳐진 그림자를 추가하면 그것까지 포함해 대응하는 box-shadow 선언을 작성해, 스타일시트에 붙여넣을 수 있게 합니다.
이럴 때 쓰세요
카드나 버튼을 페이지 위로 띄우는 은은한 그림자를 더할 때. 디자인 목업의 그림자를 값 짐작 없이 맞출 때. 여러 겹 쌓은 사실적인 그림자를 만들 때. 눌린·오목한 UI 요소용 inset 그림자를 만들 때. 다크·라이트 테마용 그림자 부드러움과 색을 미세 조정할 때. 각 box-shadow 값이 결과에 어떻게 영향을 주는지 배울 때.
자주 묻는 질문
순서대로: 가로 오프셋, 세로 오프셋, 블러 반경, 스프레드. 오프셋은 그림자를 이동시키고, 블러는 가장자리를 부드럽게 하며, 스프레드는 크기를 키우거나 줄입니다. 이어서 색상이 오며, 은은함을 위해 보통 낮은 투명도의 rgba()를 씁니다.
주의사항
무겁거나 많은 box-shadow는 특히 애니메이션 시 렌더링 성능을 해칠 수 있습니다. 자주 움직이거나 갱신되는 요소에는 그림자를 은은하게 유지하고 겹치는 레이어를 제한하세요.