🌫️ 그림자 생성기
X·Y·blur·spread·불투명도를 움직이면 box-shadow 코드가 실시간으로 완성됩니다.
사용 방법
- 가로(X)·세로(Y) 슬라이더로 그림자가 지는 방향을 정합니다.
- 흐림(blur)과 퍼짐(spread)으로 그림자의 부드러움과 크기를 조절합니다.
- 진하기와 색을 정하고 미리보기 카드로 확인합니다.
- 'CSS 복사'를 눌러 코드를 프로젝트에 붙여넣습니다.
이럴 때 유용해요
- 카드 UI에 자연스러운 떠 있는 느낌을 줄 때
- 버튼·모달의 입체감을 미세하게 조절할 때
- 디자이너가 준 시안의 그림자 수치를 CSS로 재현할 때
알아두면 좋은 팁
- 자연광 느낌을 내려면 X는 0, Y는 양수(아래 방향), blur는 Y의 2~3배가 기본 공식입니다.
- 그림자 색을 순수 검정 대신 배경색 계열의 어두운 색으로 바꾸면 훨씬 고급스러워집니다.
- 진하기(불투명도)는 10~25% 사이가 안전합니다. 30%를 넘으면 무거워 보이기 쉽습니다.
자주 묻는 질문
box-shadow 값 4개는 각각 무슨 뜻인가요?
순서대로 X 오프셋, Y 오프셋, blur(흐림 반경), spread(퍼짐 크기)입니다. 예를 들어 0 8px 24px 0 rgba(0,0,0,.18)은 아래로 8px 이동, 24px 부드럽게 번지는 그림자입니다.
inset 그림자는 언제 쓰나요?
inset을 붙이면 그림자가 요소 안쪽으로 들어가 눌린 듯한 효과가 납니다. 입력창(focus 전 상태), 눌린 버튼, 뉴모피즘 스타일에 주로 사용합니다.
그림자를 여러 겹 넣을 수 있나요?
가능합니다. box-shadow는 쉼표로 여러 그림자를 이어 쓸 수 있습니다. 가까운 진한 그림자 + 멀리 퍼지는 연한 그림자 2겹을 쓰면 실제 조명 같은 깊이감이 납니다.
그림자 때문에 스크롤이 생기거나 잘려요.
부모 요소에 overflow: hidden이 있으면 그림자가 잘립니다. 부모에 여백(padding)을 주거나 overflow 속성을 조정하세요. 그림자는 레이아웃 크기에 포함되지 않아 스크롤은 생기지 않는 것이 정상입니다.
성능에 영향은 없나요?
정적인 box-shadow는 부담이 거의 없습니다. 다만 blur 값이 큰 그림자를 애니메이션으로 계속 바꾸면 리페인트 비용이 커지므로, 그림자 전환은 opacity를 활용한 가상요소 방식이 부드럽습니다.
