개발자
CSS Box Shadow Generator
슬라이더로 박스 그림자를 조절하고 CSS 코드를 즉시 복사하세요. 여러 그림자 레이어를 쌓을 수 있습니다.
CSS
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);
그림자 #1
X 오프셋0px
Y 오프셋8px
흐림 (blur)24px
확산 (spread)0px
투명도15%
사용 방법
- 슬라이더로 그림자의 X·Y 위치, 흐림, 확산, 투명도를 조절합니다.
- inset을 켜면 안쪽으로 들어가는 그림자가 됩니다.
- + 그림자 레이어 추가로 여러 그림자를 겹쳐 깊이감을 표현할 수 있습니다.
- 박스·배경 색상을 바꿔 실제 사용 환경에 맞춰 미리보기 하세요.
- 완성된 CSS 코드를 복사해 프로젝트에 붙여넣으면 됩니다.
CSS Box Shadow Generator 자세히 알아보기
CSS box-shadow 속성을 슬라이더로 직관적으로 조절하면서 실시간 미리보기를 확인하고 결과 코드를 클립보드로 복사하는 도구입니다. X·Y 오프셋, 흐림(blur), 확산(spread), 색상, 투명도, inset(안쪽 그림자) 여부를 드래그로 조절할 수 있고, 여러 그림자 레이어를 쌓아 다층 그림자(elevation, neumorphism)도 만들 수 있습니다. "box-shadow 생성기", "CSS 그림자 만들기" 검색에 대응합니다.
더 알아보기접기
미리보기 박스의 색상과 배경 색상을 바꿔 실제 적용될 환경에서 어떻게 보일지 시각적으로 검증한 뒤, 한 번의 클릭으로 box-shadow: ... 형태의 완성된 CSS 코드를 복사할 수 있습니다. Material Design의 elevation 단계, iOS 스타일 dropdown 그림자, 뉴모피즘처럼 두 개 이상의 그림자를 조합해야 하는 경우에 유용합니다.
이럴 때 사용하세요
- •버튼·카드·모달의 elevation을 디자인할 때(Material Design 스타일)
- •뉴모피즘 UI(밝은 그림자 + 어두운 그림자 두 레이어)를 구현할 때
- •디자이너 시안의 그림자 값을 CSS로 옮길 때 미세 조정
- •inset 옵션으로 입력창 안쪽 그림자를 만들어 sunken 효과를 줄 때
- •Tailwind의 기본 shadow가 부족할 때 커스텀 그림자를 만들어 클래스로 빼고 싶을 때
CSS Box Shadow Generator 자주 묻는 질문
여러 그림자를 합치는 의미가 있나요?
네. 한 가지 그림자만으로는 자연스러운 깊이감을 표현하기 어렵습니다. 가까이 닿는 짧은 그림자 + 멀리 퍼지는 부드러운 그림자를 함께 두면 훨씬 사실적이며, Material Design의 elevation도 보통 2~3개 그림자의 합입니다.
spread(확산)은 무엇인가요?
그림자가 시작되는 "테두리"를 박스 바깥으로 얼마나 퍼뜨릴지 결정합니다. 양수면 그림자가 박스보다 크게, 음수면 박스보다 작게 보입니다. blur가 "부드러움"을 조절한다면 spread는 "크기"를 조절합니다.
inset 그림자는 어떨 때 쓰나요?
박스의 안쪽으로 들어가는 그림자입니다. input·textarea의 sunken(눌린) 효과, 카드 안쪽 hover 강조, 토글 OFF 상태처럼 "우묵한" 느낌을 표현할 때 유용합니다.
성능에 영향이 있나요?
blur 값이 매우 크거나(200px 이상) 그림자 레이어가 많으면 모바일에서 페인트 비용이 증가할 수 있습니다. 일반적으로 24~40px blur, 1~2개 레이어가 가장 효율적이며, 자주 애니메이션되는 요소에는 transform: translateZ(0)이나 will-change로 GPU 합성을 유도하는 것이 좋습니다.
대각선 그림자는 어떻게 만드나요?
X·Y 오프셋을 모두 양수로 설정하면 오른쪽 아래로 내려가는 자연스러운 그림자가 생깁니다(예: X=4, Y=8). 광원이 왼쪽 위에 있다고 가정하는 디자인 관습입니다.