[CSS] box-shadow

🧩 box-shadow란?

box-shadow는 요소에 그림자 효과를 주는 css 속성이다.
요소가 떠 있는 듯한 입체감을 주거나, 카드형 레이아웃에서 강조 효과를 낼 때 자주 사용된다.

---

🧱 기본 문법

box-shadow: offset-x offset-y blur-radius spread-radius color inset;

속성	설명	예시
offset-x	그림자의 가로 이동 거리 (양수: 오른쪽, 음수: 왼쪽)	10px
offset-y	그림자의 세로 이동 거리 (양수: 아래쪽, 음수: 위쪽)	10px
blur-radius	그림자의 흐림 정도 (값이 클수록 부드러움)	20px
spread-radius	그림자의 확장 범위 (양수: 확장, 음수: 축소)	5px
color	그림자의 색상	rgba(0,0,0,0.3)
inset	선택적으로 내부 그림자로 변경	inset

---

💡 기본 예제

.box {
  width: 200px;
  height: 200px;
  background: white;
  border-radius: 8px;
  box-shadow: 10px 10px 20px rgba(0,0,0,0.2);
}

요소의 오른쪽 아래에 살짝 퍼진 그림자가 생김
→ 입체적인 카드 느낌

---

🌙 내부 그림자

.inner-box {
  width: 200px;
  height: 200px;
  background: #eee;
  box-shadow: inset 5px 5px 15px rgba(0,0,0,0.2);
}

요소 안쪽으로 그림자가 들어간 듯한 효과를 준다.
눌린 버튼이나 입력창 안의 깊이감 표현에 자주 쓰인다.

---

🌈 여러 그림자 동시에 적용하기

콤마(,)로 구분하면 그림자를 여러 개 겹쳐서 표현할 수 있다.

.multi-shadow {
  box-shadow:
    3px 3px 10px rgba(0,0,0,0.2),
    -3px -3px 10px rgba(255,255,255,0.8);
}

부드럽게 들어가고 나온 입체감 있는 효과를 만들 수 있다.

---

🧠 실무 팁

• 부드럽고 자연스럽게 보이려면 rgba(0,0,0,0.1~0.3) 정도의 투명도 사용하기
• 밝은 배경에서는 그림자를 진하게, 어두운 배경에서는 연하게 조정하기
• 모바일 디자인에서는 그림자를 너무 많이 주면 무거워 보임
  -> 꼭 필요한 곳만 사용하기
• 성능면에서는 box-shadow가 너무 크거나 blur가 심할 경우 렌더링 비용이 증가하므로 주의