[CSS] CSS 그림자 속성(box-shadow, text-shadow)

HTML 요소에 그림자 추가하는 방법

CSS의 box-shadow와 text-shadow 속성을 사용하여 요소에 그림자 효과를 줄 수 있습니다.

 

---

1. box-shadow

📝 box-shadow 형태

box-shadow: inset offset-x offest-y blur color;

/*
   요소 2개 : offsetX, offsetY
   요소 3개 : offsetX, offsetY, blur-radius
   요소 4개 : offsetX, offsetY, blur-radius, spread-radius
*/

속성명	설명
inset	안쪽 그림자 (optional)
offset-x	요소를 기준으로 그림자의 수평 방향 떨어진 간격
offset-y	요소를 기준으로 그림자의 수직 방향 떨어진 간격
blur	그림자 가장자리를 부드럽게 처리하는 정도 (default 0)
blur-radius	그림자가 흐려지는 정도. 클수록 그림자가 넓고 희미해진다. 양수만 가능
spread-radius	그림자 확대/축소값. 양수/음수 가능
color	그림자 색 (default box color)

 

사용예시

/* <offsetX> | <offsetY> | <color> */
box-shadow: 60px -16px red;

/* <offsetX> | <offsetY> | <blur-radius> | <color> */
box-shadow: 10px 5px 5px black;

/* <offsetX> | <offsetY> | <blur-radius> | <spread-radius> | <color> */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | <offsetX> | <offsetY> | <color> */
box-shadow: inset 5em 1em gold;

 

 

---

2. text-shadow

📝 text-shadow 형태

text-shadow: offset-x offset-y blur color;

속성명	설명
offset-x	양수이면 글자의 오른쪽에, 음수이면 글자의 왼쪽에 그림자
offset-y	양수이면 글자의 아래쪽에, 음수이면 글자의 위쪽에 그림자
blur	숫자가 커질수록, 그림자가 흐릿해집니다.
blur-radius	그림자가 흐려지는 정도. 클수록 그림자가 넓고 희미해진다. 양수만 가능
color	그림자 색 (default box color)

 

 

사용예시

/* <offset-x> | <offset-y> | <color> */
text-shadow: 5px 5px #558abb;

/* <offset-x> | <offset-y> | <blur-radius> | <color> */
text-shadow: 1px 1px 2px black;

text-shadow: 5px 5px 4px skyblue;