CSS box-shadow — 박스 그림자 완전 정리

 

 

Web Development · CSS Effect

CSS box-shadow —
박스 그림자 완전 정리

카드 입체감을 만드는 한 줄 — 4개 값 + 1개 옵션

.box1 { box-shadow: 2px -2px 5px 0px black; } .box2 { box-shadow: 5px 5px 15px 5px gray; }

미세 그림자 중간 그림자 진한 그림자 inset 안쪽 큰 그림자

---

1 5가지 값 — 순서대로

box-shadow: x y blur spread color;

위치	의미	예
1번째	x — 가로 (양수=오른쪽)	5px
2번째	y — 세로 (양수=아래)	5px
3번째	blur — 흐림 (선택)	15px
4번째	spread — 그림자 크기 (선택)	5px
5번째	color — 색 (선택)	gray, rgba(0,0,0,0.3)

---

2 inset — 안쪽 그림자

맨 앞에 inset 키워드를 붙이면 안쪽으로 들어간 그림자가 된다. 입력창의 눌린 효과·움푹 들어간 느낌.

box-shadow: inset 0 0 8px rgba(0,0,0,0.3);

---

3 자주 쓰는 그림자 패턴

※ Material Design 스타일
미세: 0 1px 3px rgba(0,0,0,0.12)
카드: 0 4px 12px rgba(0,0,0,0.15)
띄움: 0 10px 25px rgba(0,0,0,0.2)

※ 다중 그림자 — 콤마로 여러 개 겹쳐 입체감 강화 가능

반응형

---

4 rgba() — 반투명 그림자가 표준

실무에서는 black이 아니라 rgba(0,0,0,0.15) 같은 반투명 검정을 사용. 자연스럽게 어우러짐.

---

핵심 한 줄 요약

x y blur spread color5가지 값 순서

x, y필수 — 양수=오른쪽·아래

blur흐림 — 0이면 단단한 그림자

spread그림자 크기 확장

inset안쪽 그림자 (눌린 효과)

rgba 권장반투명 검정이 자연스러움

다중 그림자콤마로 겹치기

Tags

#box-shadow #박스그림자 #blur #spread #inset #border-radius #rgba #CSS #HTML #입체효과 #카드 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

box-shadow, 박스그림자, blur, spread, inset, border-radius, rgba, CSS, HTML, 입체효과, 카드, 웹개발, 티스토리