[HTML, CSS] 요소에 그림자 추가하는 방법(입체감 주는 방법) box-shadow, text-shadow 총정리

HTML CSS

---

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

CSS의 box-shadow와 text-shadow 속성을 사용하여 요소에 그림자 효과를 줄 수 있습니다. 다양한 예시를 통해서 shadow 속성들을 살펴보겠습니다.

 

1. box-shadow

/* <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개 있으면 각각 offsetX, offsetY
• 길이가 3개 있으면 각각 offsetX, offsetY, blur-radius
• 길이가 4개 있으면 각각 offsetX, offsetY, blur-radius, spread-radius
• color는 앞뒤에 optional로 설정하면 됩니다.

offsetX	요소를 기준으로 그림자의 수평 방향 떨어진 간격.
offsetY	요소를 기준으로 그림자의 수직 방향 떨어진 간격.
blur-radius	그림자가 흐려지는 정도. 클수록 그림자가 넓고 희미해진다. 양수만 가능.
spread-radius	그림자 확대/축소값. 양수와 음수 가능.

 

예시

<div class="container"></div>

 

1-1. offsetX, offsetY

.container {
  width: 200px;
  height: 200px;
  background-color: #5758bb;
  box-shadow: 10px 10px black;
}

요소를 기준으로 offsetX 10px, offsetY 10px 간격을 주었습니다.

 

값을 음수로 하면 반대방향으로 간격이 생성됩니다.

.container {
  width: 200px;
  height: 200px;
  background-color: #5758bb;
  box-shadow: -10px -10px black;
}

각각 -10px로 간격을 주었고 왼, 위쪽으로 그림자가 생성되었습니다.

 

0px로 주면 요소에서 떨어지는 간격이 없다는 의미입니다. 따라서 이 경우에는 그림자가 요소와 겹쳐서 보이지 않습니다.

.container {
  width: 200px;
  height: 200px;
  background-color: #5758bb;
  box-shadow: 0px 0px black;
}

 

 

1-2. blur-radius

세 번째 값인 blur-radius로 그림자가 흩뿌려지는 효과를 추가할 수 있습니다.

.container {
  margin: 50px auto;
  width: 200px;
  height: 200px;
  background-color: #5758bb;
  box-shadow: 10px 10px 5px black;
}

 

그림자가 조금 흐려지고 넓어졌습니다. offset을 동일하게 설정한 첫 번째 예시와 비교해 보세요.

 

좀 더 큰 값으로 설정해 보겠습니다.

.container {
  margin: 50px auto;
  width: 200px;
  height: 200px;
  background-color: #5758bb;
  box-shadow: 10px 10px 20px black;
}

 

확실히 그림자가 흐려지고 넓게 퍼졌습니다.

 

blur-radius는 그림자를 전 방향으로 흩뿌리기 때문에 그림자를 요소와 겹쳐놓으면 주위에 흩뿌려진 그림자들만 보이게 됩니다.

.container {
  margin: 50px auto;
  width: 200px;
  height: 200px;
  background-color: #5758bb;
  box-shadow: 0px 0px 20px black;
}

 

 

1-3. spread-radius

네 번째 값인 spread-radius로 그림자를 확대/축소할 수 있습니다. blur-radius에 준 값 그대로 spread-radius에 주고, blur-radius는 다시 0으로 하겠습니다.

.container {
  margin: 50px auto;
  width: 200px;
  height: 200px;
  background-color: #5758bb;
  box-shadow: 0px 0px 0px 20px black;
}

 

blur-radius에서는 넓게 퍼지면서 점점 흐릿해졌지만, spread-radius에서는 그대로 확대됩니다.

 

offset 값까지 주겠습니다.

.container {
  margin: 50px auto;
  width: 200px;
  height: 200px;
  background-color: #5758bb;
  box-shadow: 10px 10px 0px 20px black;
}

 

 

2. text-shadow

/* <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 속성은 box-shadow 속성과 비슷합니다.

text-shadow에는 spread-blur 값이 없어서 위와 같이 2가지의 방법으로 설정할 수 있습니다. 물론 color는 여기서도 선택값이며 맨 앞 혹은 맨 뒤에 모두 올 수 있습니다.

<h1 class="title">Frontend Developer</h1>

 

2-1. offsetX, offsetY

.title {
  text-shadow: 5px 5px skyblue;
}

Frontend Developer

 

2-2. blur-radius

세 번째 값인 blur-radius 설정

.title {
  text-shadow: 5px 5px 4px skyblue;
}

Frontend Developer

 

 

 

---

MDN document - box-shadow

box-shadow - CSS: Cascading Style Sheets | MDN

MDN document - text-shadow

text-shadow - CSS: Cascading Style Sheets | MDN